Accordion

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it tokenized?</AccordionTrigger>
    <AccordionContent>Yes. All Yuno tokens.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Does it support multiple open?</AccordionTrigger>
    <AccordionContent>Set type="multiple" instead of "single".</AccordionContent>
  </AccordionItem>
</Accordion>

<Accordion type="multiple" defaultValue={["item-1", "item-2"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger>Payment routing</AccordionTrigger>
    <AccordionContent>Route payments by BIN, amount, and country.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Fraud shield</AccordionTrigger>
    <AccordionContent>Adds an extra 3D Secure step to risky payments.</AccordionContent>
  </AccordionItem>
</Accordion>

<Accordion type="single" collapsible className="w-full max-w-2xl">
  <AccordionItem value="q-1">
    <AccordionTrigger>How do refunds work?</AccordionTrigger>
    <AccordionContent>
      Refunds go through the same provider that captured the payment.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="q-2">
    <AccordionTrigger>Can I test with sandbox cards?</AccordionTrigger>
    <AccordionContent>
      Yes. Every provider ships a set of sandbox cards documented in their guide.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="q-3">
    <AccordionTrigger>Which currencies are supported?</AccordionTrigger>
    <AccordionContent>
      50+ currencies. Availability depends on the provider you route to.
    </AccordionContent>
  </AccordionItem>
</Accordion>

<Accordion type="multiple" defaultValue={["notifications"]} className="w-full max-w-2xl">
  <AccordionItem value="notifications">
    <AccordionTrigger>Notifications</AccordionTrigger>
    <AccordionContent>
      Configure email, push and SMS delivery for account events.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="api-keys">
    <AccordionTrigger>API keys</AccordionTrigger>
    <AccordionContent>
      Rotate and revoke keys used by your integrations.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="webhooks">
    <AccordionTrigger>Webhooks</AccordionTrigger>
    <AccordionContent>
      Endpoints Yuno calls when a payment changes state.
    </AccordionContent>
  </AccordionItem>
</Accordion>

<Accordion type="single" collapsible defaultValue="rule-1" className="w-full max-w-2xl">
  <AccordionItem value="rule-1">
    <AccordionTrigger>High-value BIN block</AccordionTrigger>
    <AccordionContent>
      <div className="grid gap-2 text-sm">
        <div className="flex justify-between">
          <span className="text-muted-foreground">Condition</span>
          <span className="text-foreground">Amount &gt; 500 USD</span>
        </div>
        <div className="flex justify-between">
          <span className="text-muted-foreground">Action</span>
          <span className="text-foreground">Block</span>
        </div>
        <div className="flex justify-between">
          <span className="text-muted-foreground">Owner</span>
          <span className="text-foreground">Risk team</span>
        </div>
      </div>
    </AccordionContent>
  </AccordionItem>
</Accordion>

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