import FaqsList from "./FaqsList";
import { useTranslations } from "next-intl";
import { Accordion } from "@/components/ui/accordion";
import Image from "next/image";
import { faqCoverImage, FaqItem } from "./faqsConfig";

export default function FaqsSection() {
  const t = useTranslations("faq");
  const faqs = t.raw("faqs") as FaqItem[];
  const middle = Math.floor(faqs.length / 2);
  const firstHalf = faqs.slice(0, middle);
  const secondHalf = faqs.slice(middle);

  return (
    <section
      id="faq"
      className="pt-5 md:pt-[80px] flex flex-col items-center gap-5 md:gap-10 w-full max-w-[1316px] mx-auto"
    >
      <Accordion
        type="single"
        collapsible
        className="w-full flex gap-5 md:gap-10 xl:gap-[62px] flex-col xl:flex-row-reverse items-start"
        defaultValue="item-1"
      >
        <div className="flex flex-col gap-5 md:gap-10 px-[18px] w-full xl:w-[686px] shrink-0">
          <h2 className="text-primary-dark font-bold text-[24px] md:text-[48px]">
            {t("title")}
          </h2>
          <FaqsList faqs={firstHalf} className="w-full xl:max-w-[609px]" />
        </div>
        <div className="relative min-h-[265px] sm:min-h-[347px] w-full xl:min-h-[431px] flex items-center">
          <div className="absolute top-0 [inset-inline-end:0] w-full h-full max-w-[85%] sm:max-w-[90%] xl:max-w-[476px] bg-[#F5F5F5] rounded-[12px] md:rounded-[24px] z-[-1] overflow-hidden">
            <Image
              src={faqCoverImage.src}
              alt={faqCoverImage.alt}
              width={faqCoverImage.width | 476}
              height={faqCoverImage.height | 431}
              className="w-full h-full object-cover"
              priority
            />
          </div>
          <FaqsList
            faqs={secondHalf}
            variant="glass"
            className="w-full max-w-[85%] sm:max-w-[90%] xl:max-w-[476px]"
          />
        </div>
      </Accordion>
    </section>
  );
}