Multi-level Accordion

import {  Accordion19,  Accordion19Collapsible,  Accordion19Content,  Accordion19Item,  Accordion19Trigger,} from '@/components/ui/shadcn-io/accordion-19';const items = [  {    id: '1',    title: 'What makes shadcn.io different?',    collapsibles: [      {        title: 'What about performance?',        content: 'We optimize every component for maximum performance and minimal bundle size.',      },      {        title: 'How is the documentation?',        content: 'Our documentation is comprehensive and includes live examples for every component.',      },    ],  },  {    id: '2',    title: 'How can I customize the components?',    collapsibles: [      {        title: 'Can I use custom themes?',        content: 'Yes, our theming system is fully customizable and supports both light and dark modes.',      },      {        title: 'What about Tailwind support?',        content: 'We have first-class support for Tailwind CSS with custom utility classes.',      },    ],  },  {    id: '3',    title: 'Is shadcn.io optimized for performance?',    collapsibles: [      {        title: "What's the bundle size impact?",        content: 'Our components are tree-shakeable and typically add minimal overhead to your bundle.',        open: true,      },      {        title: 'How is code splitting handled?',        content: 'We support automatic code splitting for optimal loading performance.',      },    ],  },  {    id: '4',    title: 'How accessible are the components?',    collapsibles: [      {        title: 'Which screen readers are supported?',        content: 'We test with NVDA, VoiceOver, and JAWS to ensure broad compatibility.',      },      {        title: 'What about keyboard navigation?',        content: 'Full keyboard navigation support is implemented following WAI-ARIA best practices.',      },    ],  },];export default function Component() {  return (    <div className="mx-auto max-w-2xl">      <Accordion19 type="single" collapsible defaultValue="3">        {items.map((item) => (          <Accordion19Item value={item.id} key={item.id}>            <Accordion19Trigger>{item.title}</Accordion19Trigger>            <Accordion19Content>              {item.collapsibles.map((collapsible, index) => (                <Accordion19Collapsible                  key={index}                  title={collapsible.title}                  content={collapsible.content}                  open={collapsible.open}                />              ))}            </Accordion19Content>          </Accordion19Item>        ))}      </Accordion19>    </div>  );}