Help Center

1import {
2  Accordion,
3  AccordionContent,
4  AccordionItem,
5  AccordionTrigger,
6} from "@/components/ui/accordion";
7 
8interface FAQItem {
9  id: string;
10  question: string;
11  answer: string;
12}
13 
14interface FAQAccordionProps {
15  items: FAQItem[];
16}
17 
18const FAQ = ({ items }: FAQAccordionProps) => {
19  return (
20    <div className="w-full max-w-4xl mx-auto">
21      <Accordion type="single" collapsible className="space-y-4">
22        {items.map((item) => (
23          <AccordionItem
24            key={item.id}
25            value={item.id}
26            className="border border-border rounded-lg px-4 bg-card shadow-sm hover:shadow-md transition-shadow duration-200"
27          >
28            <AccordionTrigger className="text-left text-lg font-medium hover:no-underline py-4">
29              {item.question}
30            </AccordionTrigger>
31            <AccordionContent className="text-muted-foreground pb-6 text-base leading-relaxed">
32              {item.answer}
33            </AccordionContent>
34          </AccordionItem>
35        ))}
36      </Accordion>
37    </div>
38  );
39};
40 
41export default FAQ;