import { urlForSanityImage } from "@/lib/sanity/client";
import type { ReassuranceSection } from "@/lib/sanity/queries";

type Props = {
  reassurance: ReassuranceSection;
};

export function ReassuranceSection({ reassurance }: Props) {
  if (!reassurance || !reassurance.items || reassurance.items.length === 0) {
    return null;
  }

  return (
    <section className="space-y-12">
      {(reassurance.title || reassurance.subtitle) && (
        <div className="space-y-2 text-center">
          {reassurance.title && (
            <h2 className="font-serif text-3xl text-[var(--foreground)] md:text-4xl">{reassurance.title}</h2>
          )}
          {reassurance.subtitle && (
            <p className="text-sm text-[var(--muted)]">{reassurance.subtitle}</p>
          )}
        </div>
      )}

      <div className="grid gap-8 md:grid-cols-4 md:gap-6">
        {reassurance.items.map((item) => {
          const iconUrl = item.icon ? urlForSanityImage(item.icon) : null;

          return (
            <div
              key={item._key}
              className="flex flex-col items-center text-center space-y-3"
            >
              {iconUrl && (
                <div className="h-16 w-16 flex-shrink-0 flex items-center justify-center">
                  <img
                    src={iconUrl}
                    alt={item.title}
                    className="h-full w-full object-contain"
                  />
                </div>
              )}
              <div className="space-y-1">
                <h3 className="font-semibold text-sm text-[var(--foreground)]">{item.title}</h3>
                <p className="text-xs leading-relaxed text-[var(--muted)]">{item.description}</p>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}