import { Collapse } from '@primitivekit/react';

import { useState } from 'react';

function BasicCollapse() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <Button onClick={() => setIsOpen(!isOpen)}>
        Toggle Content
      </Button>
      
      <Collapse isOpen={isOpen}>
        <p>This content can be collapsed</p>
      </Collapse>
    </div>
  );
}

<Collapse.Accordion>
  <Collapse.Item title="Section 1">
    <p>Content for section 1</p>
  </Collapse.Item>
  
  <Collapse.Item title="Section 2">
    <p>Content for section 2</p>
  </Collapse.Item>
  
  <Collapse.Item title="Section 3">
    <p>Content for section 3</p>
  </Collapse.Item>
</Collapse.Accordion>

<Collapse.Accordion allowMultiple>
  <Collapse.Item title="Section 1">
    <p>Content 1</p>
  </Collapse.Item>
  
  <Collapse.Item title="Section 2">
    <p>Content 2</p>
  </Collapse.Item>
</Collapse.Accordion>

<Collapse.Accordion defaultIndex={[0]}>
  <Collapse.Item title="Expanded by default">
    <p>This section is open by default</p>
  </Collapse.Item>
  
  <Collapse.Item title="Collapsed by default">
    <p>This section is closed by default</p>
  </Collapse.Item>
</Collapse.Accordion>

<Collapse
  isOpen={isOpen}
  style={{
    '--collapse-transition-duration': '300ms',
    '--collapse-border-color': 'rgba(200, 200, 200, 1)',
  }}
>
  Custom collapse
</Collapse>

<Collapse.Accordion>
  <Collapse.Item title="What is PrimitiveKit?">
    <p>PrimitiveKit is a flexible, accessible component library...</p>
  </Collapse.Item>
  
  <Collapse.Item title="How do I install it?">
    <p>Run: npm install @primitivekit/react</p>
  </Collapse.Item>
  
  <Collapse.Item title="Is it free?">
    <p>Yes, PrimitiveKit is open source and free to use.</p>
  </Collapse.Item>
</Collapse.Accordion>