import type { TextIntroBlock } from "@/types/sections";
import { useLocale } from "@/i18n/LocaleContext";
import { cn } from "@/lib/utils";

export function TextIntro({ block }: { block: TextIntroBlock }) {
  const { t } = useLocale();
  const center = block.align !== "left";
  return (
    <section className="py-16 md:py-20">
      <div className={cn("container max-w-3xl", center && "text-center")}>
        {block.eyebrow && (
          <p className="text-xs sm:text-sm uppercase tracking-[0.2em] text-accent font-medium mb-4">
            {t(block.eyebrow)}
          </p>
        )}
        <h2 className="font-display italic text-3xl sm:text-4xl md:text-5xl text-primary text-balance">
          {t(block.title)}
        </h2>
        <div
          className="mt-6 text-base sm:text-lg leading-relaxed text-foreground/85 space-y-4 [&_strong]:font-semibold [&_strong]:text-primary"
          dangerouslySetInnerHTML={{ __html: t(block.body) }}
        />
      </div>
    </section>
  );
}