"use client"

import * as React from "react"

import {
  Accordion,
  AccordionItem,
  AccordionPanel,
  AccordionTrigger,
} from "@/components/ui/accordion"
import { Button } from "@/components/ui/button"

export function AccordionControlledDemo() {
  const [value, setValue] = React.useState<string[]>([])

  return (
    <div className="flex w-full flex-col gap-4">
      <Accordion className="w-full" value={value} onValueChange={setValue}>
        <AccordionItem value="item-1">
          <AccordionTrigger>What is Base UI?</AccordionTrigger>
          <AccordionPanel>
            Base UI is a library of high-quality unstyled React components for
            design systems and web apps.
          </AccordionPanel>
        </AccordionItem>
        <AccordionItem value="item-2">
          <AccordionTrigger>How do I get started?</AccordionTrigger>
          <AccordionPanel>
            Head to the "Quick start" guide in the docs. If you've used unstyled
            libraries before, you'll feel at home.
          </AccordionPanel>
        </AccordionItem>
        <AccordionItem value="item-3">
          <AccordionTrigger>Can I use it for my project?</AccordionTrigger>
          <AccordionPanel>
            Of course! Base UI is free and open source.
          </AccordionPanel>
        </AccordionItem>
      </Accordion>

      <div className="flex flex-col items-start gap-4">
        <Button
          variant="outline"
          onClick={() => setValue(["item-1", "item-2"])}
        >
          Open First Two
        </Button>
        <p className="text-sm text-muted-foreground">
          Open items: {value.length > 0 ? value.join(", ") : "None"}
        </p>
      </div>
    </div>
  )
}

accordion particles

What is Base UI?

How do I get started?

Can I use it for my project?

What is Base UI?

How do I get started?

Can I use it for my project?

What is Base UI?

How do I get started?

Can I use it for my project?

What is Base UI?

How do I get started?

Can I use it for my project?