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

function Accordion3() {
  return (
    <Accordion type="single" collapsible className="w-full space-y-4 text-sm max-w-[400px]">
      <AccordionItem
        className="rounded border bg-primary-foreground 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="rounded border bg-primary-foreground 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="rounded border bg-primary-foreground 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 { Accordion3 }