'use client'

import { useEffect, useState } from 'react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/ui/accordion'

interface FAQItem {
  question: string
  answer: string
}

export default function FAQ() {
  const [faqs, setFaqs] = useState<FAQItem[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    async function fetchFAQ() {
      try {
        const response = await fetch('/api/faq')
        if (!response.ok) {
          throw new Error('Failed to load FAQ')
        }
        const data = await response.json()
        setFaqs(data)
      } catch {
        // If there's an error, just show no FAQs
        setFaqs([])
      } finally {
        setLoading(false)
      }
    }

    fetchFAQ()
  }, [])

  // Don't show anything if loading, error, or no FAQs
  if (loading || faqs.length === 0) {
    return null
  }

  return (
    <Card className="w-full max-w-md dark:bg-zinc-950 dark:border-zinc-800">
      <CardHeader>
        <CardTitle className="dark:text-white">Frequently Asked Questions</CardTitle>
      </CardHeader>
      <CardContent>
        <Accordion type="single" collapsible className="w-full">
          {faqs.map((faq, index) => (
            <AccordionItem key={index} value={`item-${index}`} className="dark:border-zinc-800">
              <AccordionTrigger className="dark:text-white">
                {faq.question}
              </AccordionTrigger>
              <AccordionContent className="dark:text-zinc-400">
                {faq.answer}
              </AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      </CardContent>
    </Card>
  )
}