"use client";

import { IconChevronDown } from "@tabler/icons-react";
import { AnimatePresence, motion } from "motion/react";
import { useState } from "react";

interface FAQQuestion {
  answer: string;
  question: string;
}

interface FAQAuditSectionProps {
  gradientDirection?: string;
  questions: FAQQuestion[];
}

function FAQAccordionItem({
  question,
  answer,
  index,
}: FAQQuestion & { index: number }) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <motion.div
      className="border-white/10 border-b last:border-b-0"
      initial={{ opacity: 0, y: 20 }}
      transition={{
        duration: 0.5,
        delay: index * 0.06,
        ease: [0.21, 0.47, 0.32, 0.98],
      }}
      viewport={{ once: true, amount: 0.2 }}
      whileInView={{ opacity: 1, y: 0 }}
    >
      <button
        aria-expanded={isOpen}
        className="flex w-full cursor-pointer items-center justify-between gap-4 rounded-lg px-2 py-5 text-left transition-colors duration-200 hover:bg-white/5"
        onClick={() => setIsOpen(!isOpen)}
        type="button"
      >
        <span className="font-medium text-base text-neutral-200 md:text-lg">
          {question}
        </span>
        <span
          className={`flex-shrink-0 transition-transform duration-300 ${
            isOpen ? "rotate-180" : "rotate-0"
          }`}
        >
          <IconChevronDown className="h-5 w-5 text-[#FD105E]" strokeWidth={2} />
        </span>
      </button>
      <AnimatePresence initial={false}>
        {isOpen && (
          <motion.div
            animate={{ height: "auto", opacity: 1 }}
            className="overflow-hidden"
            exit={{ height: 0, opacity: 0 }}
            initial={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.3, ease: [0.21, 0.47, 0.32, 0.98] }}
          >
            <p className="px-2 pb-5 text-neutral-400 text-sm leading-relaxed md:text-base">
              {answer}
            </p>
          </motion.div>
        )}
      </AnimatePresence>
    </motion.div>
  );
}

export function FAQAuditSection({
  questions,
  gradientDirection = "bg-gradient-to-br",
}: FAQAuditSectionProps) {
  if (!questions?.length) {
    return null;
  }

  return (
    <section
      className={`${gradientDirection} from-[#000] to-[#1A2428] py-12 sm:py-24 md:py-32`}
    >
      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6">
          {/* Title */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
            whileInView={{ opacity: 1, y: 0 }}
          >
            <h2 className="sticky top-24 text-center font-bold text-2xl text-white sm:text-3xl md:text-left md:text-5xl">
              Frequently Asked <span className="text-[#FD105E]">Questions</span>
            </h2>
          </motion.div>

          {/* Accordion */}
          <div>
            {questions.map((item, index) => (
              <FAQAccordionItem
                answer={item.answer}
                index={index}
                key={item.question}
                question={item.question}
              />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}