"use client";

import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { ChevronDown } from "lucide-react";
import { useTranslations } from "next-intl";

interface FaqItem {
  questionKey: string;
  answerKey: string;
}

interface FaqProps {
  items?: FaqItem[];
}

export function FAQ({ items }: FaqProps) {
  const t = useTranslations();
  const [openIndex, setOpenIndex] = useState<number | null>(0);

  const defaultItems: FaqItem[] = [
    {
      questionKey: "faq.items.0.question",
      answerKey: "faq.items.0.answer",
    },
    {
      questionKey: "faq.items.1.question",
      answerKey: "faq.items.1.answer",
    },
    {
      questionKey: "faq.items.2.question",
      answerKey: "faq.items.2.answer",
    },
  ];

  const faqItems = items || defaultItems;

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: { staggerChildren: 0.1 },
    },
  };

  const itemVariants = {
    hidden: { opacity: 0, y: 10 },
    visible: { opacity: 1, y: 0 },
  };

  return (
    <section id="faq" className="py-20 bg-white">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <motion.div
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          transition={{ duration: 0.6 }}
          viewport={{ once: true }}
          className="text-center mb-16"
        >
          <h2 className="text-4xl font-bold text-gray-900 mb-4">
            {t("faq.title")}
          </h2>
          <div className="w-20 h-1 bg-blue-600 mx-auto rounded-full" />
        </motion.div>

        {/* FAQ Items */}
        <motion.div
          variants={containerVariants}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true }}
          className="space-y-4"
        >
          {faqItems.map((item, idx) => (
            <motion.div key={idx} variants={itemVariants}>
              <motion.button
                onClick={() => setOpenIndex(openIndex === idx ? null : idx)}
                className="w-full bg-gray-50 hover:bg-gray-100 transition-colors rounded-lg p-6 text-left"
              >
                <div className="flex items-center justify-between">
                  <h3 className="text-lg font-semibold text-gray-900 flex-1">
                    {t(item.questionKey)}
                  </h3>
                  <motion.div
                    animate={{ rotate: openIndex === idx ? 180 : 0 }}
                    transition={{ duration: 0.3 }}
                    className="ml-4 shrink-0"
                  >
                    <ChevronDown className="text-blue-600" size={24} />
                  </motion.div>
                </div>
              </motion.button>

              <AnimatePresence>
                {openIndex === idx && (
                  <motion.div
                    initial={{ opacity: 0, height: 0 }}
                    animate={{ opacity: 1, height: "auto" }}
                    exit={{ opacity: 0, height: 0 }}
                    transition={{ duration: 0.3 }}
                    className="overflow-hidden"
                  >
                    <div className="bg-blue-50 p-6 rounded-b-lg border-t border-gray-200">
                      <p className="text-gray-700 leading-relaxed">
                        {t(item.answerKey)}
                      </p>
                    </div>
                  </motion.div>
                )}
              </AnimatePresence>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  );
}