Collapsible

import { ChevronDownIcon } from "lucide-react";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/cnippet-collapsible";

export default function CollapsibleCard() {
  return (
    <div className="w-full max-w-xs">
      <div className="rounded-xl border bg-card px-3 py-4 text-card-foreground shadow-sm">
        <Collapsible>
          <CollapsibleTrigger className="flex w-full cursor-pointer items-center justify-between gap-4 text-sm">
            <span>How do I reset my password?</span>
            <ChevronDownIcon
              aria-hidden="true"
              className="size-4 shrink-0 in-data-panel-open:rotate-180 text-muted-foreground transition-transform"
            />
          </CollapsibleTrigger>
          <CollapsibleContent>
            <div className="pt-3 text-muted-foreground text-sm">
              You can reset your password by clicking the &quot;Forgot
              Password&quot; link on the login page. We&apos;ll send you an email
              with instructions to create a new password.
            </div>
          </CollapsibleContent>
        </Collapsible>
      </div>
    </div>
  );
}