"use client";

import { useId, useState } from "react";
import { IconMinus, IconPlus } from "@tabler/icons-react";
import { AnimatePresence, m } from "motion/react";

import type { Dictionary } from "@/app/[lang]/dictionaries";
import { Container } from "@/components/ui/container";
import { SectionHead } from "@/components/ui/section-head";
import { cn } from "@/lib/utils";

export const FAQs = ({ dict }: { dict: Dictionary["faqs"] }) => {
  return (
    <section
      id="faqs"
      className="relative overflow-hidden py-10 md:py-20 lg:py-32"
    >
      <Container>
        <SectionHead
          eyebrow="FAQ"
          title={dict.title}
          className="mb-10 md:mb-16"
        />

        <div className="flex flex-col gap-4">
          {dict.items.map((question, index) => (
            <Question
              key={index}
              question={question.question}
              answer={question.answer}
            />
          ))}
        </div>
      </Container>
    </section>
  );
};

const Question = ({
  question,
  answer,
}: {
  question: string;
  answer: string;
}) => {
  const [open, setOpen] = useState(false);
  const id = useId();
  const buttonId = `faq-button-${id}`;
  const panelId = `faq-panel-${id}`;

  return (
    <div className="border-hairline bg-surface hover:border-hairline-2 w-full overflow-hidden rounded-3xl border transition-colors duration-200">
      <h3>
        <button
          type="button"
          id={buttonId}
          onClick={() => setOpen(!open)}
          aria-expanded={open}
          aria-controls={panelId}
          className="flex w-full items-center justify-between p-4 text-left md:p-8"
        >
          <span className="font-display text-lg font-bold md:text-2xl">
            {question}
          </span>
          <span className="bg-gradient-brand relative flex size-6 shrink-0 items-center justify-center rounded-full">
            <IconMinus
              aria-hidden="true"
              className={cn(
                "absolute inset-0 size-6 text-white transition-all duration-200",
                open && "scale-0 rotate-90",
              )}
            />
            <IconPlus
              aria-hidden="true"
              className={cn(
                "absolute inset-0 size-6 scale-0 -rotate-90 text-white transition-all duration-200",
                open && "scale-100 rotate-0",
              )}
            />
          </span>
        </button>
      </h3>
      <AnimatePresence initial={false}>
        {open && (
          <m.div
            id={panelId}
            role="region"
            aria-labelledby={buttonId}
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: "auto", opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.2 }}
            className="overflow-hidden"
          >
            <p className="px-4 pb-4 text-left text-neutral-600 md:px-8 md:pb-8 dark:text-neutral-200">
              {answer}
            </p>
          </m.div>
        )}
      </AnimatePresence>
    </div>
  );
};