import { ChevronDownIcon } from "lucide-react";
import {
  Collapsible,
  CollapsiblePanel,
  CollapsibleTrigger,
} from "@/components/ui/component";

export default function CollapsibleDemo() {
  return (
    <div className="flex items-center justify-center w-full min-h-screen bg-background p-8">
      <Collapsible>
        <CollapsibleTrigger className="inline-flex items-center gap-2 font-medium text-sm data-panel-open:[&_svg]:rotate-180">
          Show recovery keys
          <ChevronDownIcon className="size-4 transition-transform duration-200" />
        </CollapsibleTrigger>
        <CollapsiblePanel>
          <ul className="flex flex-col gap-1 py-2 text-muted-foreground text-sm">
            <li className="rounded-sm bg-muted px-2 py-1 font-mono">
              4829-1735-6621
            </li>
            <li className="rounded-sm bg-muted px-2 py-1 font-mono">
              9182-6407-5532
            </li>
            <li className="rounded-sm bg-muted px-2 py-1 font-mono">
              3051-7924-9018
            </li>
          </ul>
        </CollapsiblePanel>
      </Collapsible>
    </div>
  );
}