"use client";

import { useState } from "react";
import { ChevronDown } from "lucide-react";
import { useLanguage } from "@/contexts/language-context";

export default function FAQ() {
  const [openIndex, setOpenIndex] = useState<number | null>(null);
  const {t} = useLanguage();

  const faqs = [
  {
    question: t.faq.list[0].q,
    answer:t.faq.list[0].a,
  },
  {
    question: t.faq.list[1].q,
    answer:t.faq.list[1].a,
  },
  {
    question: t.faq.list[2].q,
    answer:t.faq.list[2].a,
  },
  {
    question: t.faq.list[3].q,
    answer:t.faq.list[3].a,
  },
  {
    question: t.faq.list[4].q,
    answer:t.faq.list[4].a,
  },
  {
    question: t.faq.list[5].q,
    answer:t.faq.list[5].a,
  },
];

  return (
    <section id="faq" className="py-20 md:py-32 px-4 sm:px-6 lg:px-8 bg-muted">
      <div className="max-w-3xl mx-auto">
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
            {t.faq.title}
          </h2>
          <p className="text-lg text-muted-foreground">
            {t.faq.subtitle}
          </p>
        </div>

        <div className="space-y-3">
          {faqs.map((faq, index) => (
            <div
              key={index}
              className="bg-background border border-border rounded-lg overflow-hidden hover:border-primary/50 transition-colors"
            >
              <button
                onClick={() => setOpenIndex(openIndex === index ? null : index)}
                className="w-full px-6 py-4 flex items-center justify-between hover:bg-muted/50 transition-colors"
              >
                <span className="text-left font-semibold text-foreground">
                  {faq.question}
                </span>
                <ChevronDown
                  size={20}
                  className={`flex-shrink-0 text-primary transition-transform duration-300 ${
                    openIndex === index ? "rotate-180" : ""
                  }`}
                />
              </button>

              {openIndex === index && (
                <div className="px-6 py-4 border-t border-border bg-muted/30">
                  <p className="text-muted-foreground">{faq.answer}</p>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}