{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "faq-2",
  "dependencies": [
    "lucide-react",
    "react-icons"
  ],
  "registryDependencies": [
    "accordion",
    "button"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/faq-2.tsx",
      "content": "import { useState } from \"react\";\nimport { FiPlus, FiMinus } from \"react-icons/fi\";\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\";\n\nexport interface FAQItem {\n  question: string;\n  answer: string;\n}\n\nexport interface FAQCategory {\n  id: string;\n  label: string;\n  icon: React.ReactNode;\n  items: FAQItem[];\n}\n\nexport interface FAQSectionProps {\n  badge?: string;\n  title?: string;\n  subtitle?: string;\n  categories: FAQCategory[];\n  contactLabel?: string;\n  contactEmail?: string;\n}\n\ninterface CategoryTabProps {\n  category: FAQCategory;\n  isActive: boolean;\n  onClick: () => void;\n}\n\nfunction CategoryTab({ category, isActive, onClick }: CategoryTabProps) {\n  return (\n    <button\n      onClick={onClick}\n      className={`inline-flex items-center gap-1.5 rounded-full px-3.5 py-2 text-sm font-medium whitespace-nowrap transition-all duration-200 ${\n        isActive\n          ? \"bg-primary text-primary-foreground shadow-sm\"\n          : \"text-muted-foreground hover:bg-accent hover:text-accent-foreground\"\n      } `}\n    >\n      <span\n        className={`text-xs ${isActive ? \"text-primary-foreground\" : \"text-muted-foreground\"}`}\n      >\n        {category.icon}\n      </span>\n      {category.label}\n    </button>\n  );\n}\n\nexport default function FAQ2({\n  badge = \"Need help?\",\n  title = \"Frequently asked questions\",\n  subtitle = \"Find quick answers about our pricing, onboarding, and performance tracking tools.\",\n  categories,\n}: FAQSectionProps) {\n  const [activeCategory, setActiveCategory] = useState<string>(\n    categories[0]?.id ?? \"\",\n  );\n\n  const currentItems =\n    categories.find((c) => c.id === activeCategory)?.items ?? [];\n\n  const handleCategoryChange = (id: string) => {\n    setActiveCategory(id);\n  };\n\n  return (\n    <section className=\"bg-background flex w-full flex-col items-center px-4 py-16\">\n      <div className=\"mx-auto mb-10 max-w-xl text-center md:mb-12\">\n        <p className=\"text-muted-foreground mb-4 inline-flex items-center gap-1.5 text-xs font-medium tracking-widest uppercase\">\n          <span className=\"bg-muted-foreground inline-block h-1 w-1 rounded-full\" />\n          {badge}\n        </p>\n\n        <h1 className=\"text-foreground mb-4 text-3xl leading-tight font-bold tracking-tight sm:text-4xl md:text-5xl\">\n          {title}\n        </h1>\n\n        <p className=\"text-muted-foreground mx-auto max-w-md text-sm leading-relaxed md:text-base\">\n          {subtitle}\n        </p>\n      </div>\n\n      <div className=\"mx-auto mb-8 w-full max-w-2xl\">\n        <div className=\"scrollbar-hide bg-muted mx-auto flex w-fit max-w-full items-center gap-1.5 overflow-x-auto rounded-full px-1 py-1.5\">\n          {categories.map((cat) => (\n            <CategoryTab\n              key={cat.id}\n              category={cat}\n              isActive={activeCategory === cat.id}\n              onClick={() => handleCategoryChange(cat.id)}\n            />\n          ))}\n        </div>\n      </div>\n\n      <div className=\"mx-auto w-full max-w-2xl\">\n        {currentItems.length > 0 ? (\n          <Accordion\n            type=\"single\"\n            collapsible\n            className=\"flex w-full flex-col gap-2.5\"\n          >\n            {currentItems.map((item, index) => (\n              <AccordionItem\n                key={`${activeCategory}-${index}`}\n                value={`${activeCategory}-${index}`}\n                className=\"border-border bg-muted/50 hover:bg-accent hover:border-border/80 data-[state=open]:bg-background overflow-hidden rounded-xl border transition-all duration-300 ease-in-out data-[state=open]:shadow-sm\"\n                style={{ animationDelay: `${index * 60}ms` }}\n              >\n                <AccordionTrigger className=\"group flex w-full items-center justify-between gap-4 px-5 py-3 text-left hover:no-underline [&_[data-slot=accordion-trigger-icon]]:!hidden\">\n                  <span className=\"text-muted-foreground group-hover:text-foreground group-data-[state=open]:text-foreground text-sm leading-snug font-medium transition-colors duration-200 md:text-base\">\n                    {item.question}\n                  </span>\n                  <span className=\"bg-muted text-muted-foreground group-hover:bg-muted-foreground/20 group-data-[state=open]:bg-primary group-data-[state=open]:text-primary-foreground flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full transition-all duration-300\">\n                    <FiPlus\n                      size={12}\n                      className=\"block group-data-[state=open]:hidden\"\n                    />\n                    <FiMinus\n                      size={12}\n                      className=\"hidden group-data-[state=open]:block\"\n                    />\n                  </span>\n                </AccordionTrigger>\n                <AccordionContent className=\"bg-muted rounded-xl p-4\">\n                  <p className=\"text-muted-foreground text-sm leading-relaxed\">\n                    {item.answer}\n                  </p>\n                </AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        ) : (\n          <p className=\"text-muted-foreground py-10 text-center text-sm\">\n            No questions in this category yet.\n          </p>\n        )}\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/faq-2.tsx"
    }
  ],
  "type": "registry:ui"
}