"use client";

import { useState } from "react";
import { Section } from "../Section";
import { FAQ_CONFIG } from "@/config/course";

export function FAQSection() {
  const [openIndex, setOpenIndex] = useState<number | null>(null);

  return (
    <Section>
      <h2 className="mb-10 text-center text-xl font-bold sm:text-2xl md:text-3xl">
        {FAQ_CONFIG.title}
      </h2>
      <div className="mx-auto max-w-2xl space-y-2">
        {FAQ_CONFIG.items.map((item, i) => (
          <div
            key={i}
            className="overflow-hidden rounded-xl border border-[var(--border)] bg-[var(--card)] transition"
          >
            <button
              type="button"
              onClick={() => setOpenIndex(openIndex === i ? null : i)}
              className="flex w-full items-center justify-between gap-3 px-4 py-3 text-left transition hover:bg-[var(--muted)] sm:px-5"
            >
              <span className="font-medium">{item.q}</span>
              <span
                className={`shrink-0 text-[var(--muted-foreground)] transition-transform ${openIndex === i ? "rotate-180" : ""}`}
              >
                ▼
              </span>
            </button>
            {openIndex === i && (
              <div className="border-t border-[var(--border)] px-4 py-3 text-sm text-[var(--muted-foreground)] sm:px-5">
                {item.a}
              </div>
            )}
          </div>
        ))}
      </div>
    </Section>
  );
}