import React, { forwardRef, useState } from "react";
import { FAQSectionProps } from "../../types";

export const FAQSection = forwardRef<HTMLElement, FAQSectionProps>(
  (
    {
      className = "",
      title = "Frequently Asked Questions",
      subtitle = "Find answers to common questions about our component library",
      faqs = [
        {
          question: "How do I install the component library?",
          answer:
            "You can install it via npm: `npm install agentc-starter-kit`. Then import the components you need in your React application.",
        },
        {
          question: "Is TypeScript supported?",
          answer:
            "Yes! The library is built with TypeScript and includes full type definitions for all components.",
        },
        {
          question: "Can I customize the styling?",
          answer:
            "Absolutely! All components use Tailwind CSS classes and support custom styling through className props and CSS variables.",
        },
        {
          question: "What authentication providers are supported?",
          answer:
            "We support Google, Kakao, and Naver authentication out of the box, with easy integration for NextAuth.js.",
        },
        {
          question: "Is there dark mode support?",
          answer:
            "Yes, all components support dark mode through CSS custom properties and Tailwind's dark mode utilities.",
        },
        {
          question: "Do you provide documentation?",
          answer:
            "Yes, we provide comprehensive documentation with examples, API references, and usage guidelines for all components.",
        },
      ],
      variant = "accordion",
      children,
      ...props
    },
    ref
  ) => {
    const [openIndex, setOpenIndex] = useState<number | null>(null);

    const toggleAccordion = (index: number) => {
      setOpenIndex(openIndex === index ? null : index);
    };

    const renderAccordionFAQ = (faq: (typeof faqs)[0], index: number) => (
      <div
        key={index}
        className="border border-border rounded-lg overflow-hidden"
      >
        <button
          onClick={() => toggleAccordion(index)}
          className="w-full px-6 py-4 text-left bg-background hover:bg-muted/50 transition-colors flex items-center justify-between"
          aria-expanded={openIndex === index}
          aria-controls={`faq-answer-${index}`}
        >
          <span className="font-semibold text-foreground">{faq.question}</span>
          <svg
            className={`w-5 h-5 text-muted-foreground transition-transform ${
              openIndex === index ? "rotate-180" : ""
            }`}
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M19 9l-7 7-7-7"
            />
          </svg>
        </button>

        <div
          id={`faq-answer-${index}`}
          className={`px-6 overflow-hidden transition-all duration-300 ease-in-out ${
            openIndex === index ? "py-4 max-h-96" : "py-0 max-h-0"
          }`}
        >
          <p className="text-muted-foreground">{faq.answer}</p>
        </div>
      </div>
    );

    const renderGridFAQ = (faq: (typeof faqs)[0], index: number) => (
      <div key={index} className="border border-border rounded-lg p-6 bg-card">
        <h3 className="font-semibold text-foreground mb-3">{faq.question}</h3>
        <p className="text-muted-foreground">{faq.answer}</p>
      </div>
    );

    return (
      <section
        ref={ref}
        className={`py-16 px-4 sm:px-6 lg:px-8 ${className}`}
        {...props}
      >
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
              {title}
            </h2>
            {subtitle && (
              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
                {subtitle}
              </p>
            )}
          </div>

          <div
            className={
              variant === "grid"
                ? "grid grid-cols-1 md:grid-cols-2 gap-6"
                : "space-y-4"
            }
          >
            {faqs.map((faq, index) =>
              variant === "grid"
                ? renderGridFAQ(faq, index)
                : renderAccordionFAQ(faq, index)
            )}
          </div>

          {children}
        </div>
      </section>
    );
  }
);

FAQSection.displayName = "FAQSection";