import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

function Accordion2() {
  return (
    <Accordion
      type="single"
      collapsible
      className="w-full rounded border text-sm max-w-[400px]"
    >
      <AccordionItem className="px-4" value="item-1">
        <AccordionTrigger>What is a micro-interaction?</AccordionTrigger>
        <AccordionContent className="text-muted-foreground">
          Micro-interactions are events which have one main task — a single
          purpose — and they are found all over your device and within apps.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem className="px-4" value="item-2">
        <AccordionTrigger>
          Why should I use a micro-interaction?
        </AccordionTrigger>
        <AccordionContent className="text-muted-foreground">
          You should use micro-interactions to enhance a simple task and to make
          the experience more enjoyable.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem className="border-b-0 px-4" value="item-3">
        <AccordionTrigger>How do I use a micro-interaction?</AccordionTrigger>
        <AccordionContent className="text-muted-foreground">
          Start by thinking about the task you want the user to perform.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

export { Accordion2 }