"use client";

import * as React from "react";
import { cn } from "@/lib/utils";
import { Badge } from "@/components/ui/badge/radix";
import { Button } from "@/components/ui/button/radix";
import {
  Card,
  CardContent,
  CardHeader,
  CardHeading,
  CardToolbar,
} from "@/components/ui/card/radix";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible/radix";
import { ArrowDown, ArrowUp, ChevronDown, ChevronUp } from "lucide-react";

export default function CollapsibleDemo() {
  const [isOpen, setIsOpen] = React.useState(false);

  interface StatItem {
    label: string;
    value: number;
    change: string;
    changeType: "increase" | "decrease"; // Type to define whether it's an increase or decrease
  }

  const stats: StatItem[] = [
    {
      label: "Create CVA Variants",
      value: 142,
      change: "+32.8%",
      changeType: "increase",
    },
    {
      label: "inital Components",
      value: 156,
      change: "-1.2%",
      changeType: "decrease",
    },
    {
      label: "Purchases",
      value: 649,
      change: "+12.4%",
      changeType: "increase",
    },
  ];

  return (
    <Card className="w-[350px]">
      <Collapsible open={isOpen} onOpenChange={setIsOpen}>
        <CardHeader className="h-auto py-4">
          <CardHeading>
            <div className="text-muted-foreground font-medium text-sm">
              Completness Unified UI
            </div>
            <div className="flex items-center gap-1.5">
              <span className="text-foreground font-semibold text-xl">
                39.92%
              </span>
              <Badge
                variant="primary"
                appearance="outline"
                size="sm"
                shape="circle"
              >
                +23,5%
              </Badge>
            </div>
          </CardHeading>
          <CardToolbar>
            <CollapsibleTrigger asChild>
              <Button variant="outline" size="sm" className="">
                Base UI
                {isOpen ? <ChevronUp /> : <ChevronDown />}
              </Button>
            </CollapsibleTrigger>
          </CardToolbar>
        </CardHeader>
        <CollapsibleContent>
          <CardContent className="text-sm space-y-3">
            {stats.map((stat, index) => (
              <div key={index} className="flex items-center justify-between">
                <span className="text-muted-foreground">{stat.label}</span>
                <div className="flex items-center space-x-2">
                  <span className="text-foreground font-semibold">
                    ${stat.value.toLocaleString()}
                  </span>
                  <span
                    className={cn(
                      "flex items-center justify-end text-sm font-medium min-w-20",
                      stat.changeType === "increase"
                        ? "text-success"
                        : "text-destructive",
                    )}
                  >
                    {stat.changeType === "increase" ? (
                      <ArrowUp className="size-3.5" />
                    ) : (
                      <ArrowDown className="size-3.5" />
                    )}
                    {stat.change}
                  </span>
                </div>
              </div>
            ))}
          </CardContent>
        </CollapsibleContent>
      </Collapsible>
    </Card>
  );
}
Collapsible Pattern

Card

Default

We use cookies
