"use client";

import Image from "next/image";
import { Reveal } from "@/components/shared/Reveal";
import { FaCheck } from "react-icons/fa";

type Props = {
  section: {
    highlights: string[];
    image?: string;
    imageAlt?: string;
    bestFor?: string[];
  };
};

export default function HighlightsSection({ section }: Props) {
  return (
    <section className="bg-cream py-12 md:py-16">
      <Reveal>
        <div className="mx-auto max-w-7xl px-12 md:px-8">

          <div
            className={`grid gap-20 lg:gap-28 ${
              section.image || section.bestFor
                ? "lg:grid-cols-[0.85fr_0.85fr]"
                : "lg:grid-cols-1 max-w-4xl mx-auto"
            }`}
          >

            {(section.image || section.bestFor) && (
              <div className="flex flex-col">

                {section.image && (
                  <div className="relative overflow-hidden rounded-xl">
                    <div className="relative aspect-[9/6]">
                      <Image
                        src={section.image}
                        alt={section.imageAlt || "Highlights"}
                        title={section.imageAlt || "Highlights"}
                        fill
                        className="object-cover"
                      />
                    </div>
                  </div>
                )}

                {section.bestFor && section.bestFor.length > 0 && (
                  <div className={section.image ? "mt-10" : "text-center"}>
                    <h3 className="font-serif italic text-2xl md:text-3xl text-espresso underline underline-offset-2">
                      Best For
                    </h3>
                    <div className="mt-6 w-full border-t border-gold/30 pt-2">
                      <div className="mx-auto grid w-full max-w-3xl grid-cols-1 sm:grid-cols-2 gap-x-10 gap-y-1">
                      {section.bestFor.map((item, index) => (
                        <li
                          key={index}
                          className="flex items-center gap-3 border-b border-gold/20 px-2 py-3 text-left"
                        >
                          <span className="flex-shrink-0 text-gold">
                            <FaCheck size={10} />
                          </span>
                          <span className="font-serif text-[18px] leading-7 text-mahogany will-change-transform transition-all duration-500 hover:text-espresso hover:scale-105">
                            {item}
                          </span>
                        </li>
                      ))}
                     </div>
                    </div>
                  </div>
                )}
              </div>
            )}
              <div className="text-center">
                <h3 className="font-serif italic text-2xl md:text-3xl text-espresso underline underline-offset-2">
                  Highlights
                </h3>
                <div className="mt-6 w-full border-t border-gold/30 pt-2">
                <div className="mx-auto grid w-full max-w-3xl grid-cols-1 sm:grid-cols-2 gap-x-10 gap-y-1">
                  {section.highlights.map((item, index) => (
                    <div
                      key={index}
                      className="flex items-center gap-3 border-b border-gold/20 px-2 py-3 text-left"
                    >
                      <span className="flex-shrink-0 text-gold">
                        <FaCheck size={10} />
                      </span>
                      <p className="font-serif text-[18px] leading-7 text-mahogany will-change-transform transition-all duration-500 hover:text-espresso hover:scale-105">
                        {item}
                      </p>
                    </div>
                  ))}
                </div>
              </div>
              </div>
          </div>
        </div>
      </Reveal>
    </section>
  );
}