import type { TextImageBlock } from "@/types/sections";
import { useLocale } from "@/i18n/LocaleContext";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { ArrowRight } from "lucide-react";

export function TextImage({ block }: { block: TextImageBlock }) {
  const { t } = useLocale();
  const right = block.imagePosition !== "left";
  return (
    <section className="py-16 md:py-20">
      <div className="container grid items-center gap-10 lg:grid-cols-2 lg:gap-16">
        <div className={cn("order-2", right ? "lg:order-1" : "lg:order-2")}>
          <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) }}
          />
          {block.cta && (
            <Button asChild className="mt-8 rounded-sm">
              <a
                href={block.cta.href}
                target={block.cta.external ? "_blank" : undefined}
                rel={block.cta.external ? "noopener noreferrer" : undefined}
              >
                {t(block.cta.label)}
                <ArrowRight className="ml-2 h-4 w-4" aria-hidden />
              </a>
            </Button>
          )}
        </div>
        <div className={cn("order-1", right ? "lg:order-2" : "lg:order-1")}>
          <img
            src={block.image.src}
            alt={t(block.image.alt)}
            loading="lazy"
            className="w-full rounded-sm shadow-[0_30px_60px_-30px_hsl(var(--primary)/0.35)] object-cover aspect-[4/3]"
          />
        </div>
      </div>
    </section>
  );
}