Accordion

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@mcp-elements/react'

const items = [
  { value: 'transport' },
  { value: 'auth' },
  { value: 'tools' },
]

export function Example() {
  return (
    <Accordion items={items} collapsible className="w-full max-w-md">
      {({ expandedValues, getTriggerProps, getContentProps }) => (
        <>
          {items.map((item) => (
            <AccordionItem key={item.value}>
              <AccordionTrigger
                {...getTriggerProps(item.value, expandedValues)}
                isExpanded={expandedValues.includes(item.value)}
              >
                {item.value}
              </AccordionTrigger>
              <AccordionContent {...getContentProps(item.value, expandedValues)}>
                Configuration details for {item.value}.
              </AccordionContent>
            </AccordionItem>
          ))}
        </>
      )}
    </Accordion>
  )
}