import { Badge } from "@/registry/default/ui/badge/radix";
import { Button } from "@/registry/default/ui/button/radix";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  CardToolbar,
} from "@/registry/default/ui/card/radix";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/registry/default/ui/dropdown-menu";
import { BarChart2, MoreHorizontal } from "lucide-react";

export default function StatisticCard10() {
  return (
    <div className="min-h-screen flex items-center justify-center p-6 lg:p-8">
      <Card className="w-full max-w-md">
        <CardHeader className="border-0 py-6 min-h-auto">
          <CardTitle className="inline-flex items-center gap-2">
            <BarChart2 className="size-8 text-primary" />
            Total Revenue
          </CardTitle>
          <CardToolbar>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="icon-sm">
                  <MoreHorizontal className="size-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" side="bottom">
                <DropdownMenuItem>Settings</DropdownMenuItem>
                <DropdownMenuItem>Export Data</DropdownMenuItem>
                <DropdownMenuItem>Pin to Dashboard</DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem variant="destructive">
                  Remove
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </CardToolbar>
        </CardHeader>
        <CardContent className="flex flex-col justify-between gap-3.5">
          <div className="space-y-3.5">
            {/* Revenue */}
            <div className="flex items-center gap-2.5 mb-2.5">
              <span className="text-3xl font-bold text-foreground tracking-tight">
                $ 1,120,500
              </span>
              <span className="text-xs text-muted-foreground font-medium leading-none">
                USD
              </span>
            </div>

            {/* Revenue trend */}
            <div className="flex items-center gap-2 mb-4">
              <Badge variant="success" appearance="light">
                <svg
                  width="14"
                  height="14"
                  viewBox="0 0 14 14"
                  fill="none"
                  className="inline-block"
                >
                  <path
                    d="M3 5.5L7 9.5L11 5.5"
                    stroke="currentColor"
                    strokeWidth="1.5"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
                -12.7%
              </Badge>
              <span className="text-sm text-muted-foreground">
                decreased from last quarter
              </span>
            </div>
          </div>

          <div className="space-y-1">
            <div className="p-2.5 bg-muted/60 flex items-center justify-between rounded-lg">
              <span className="text-sm text-accent-foreground">
                Avg. Subscription Value:
              </span>
              <span className="text-base font-semibold text-foreground">
                $320
              </span>
            </div>
            <div className="p-2.5 bg-muted/60 flex items-center justify-between rounded-lg">
              <span className="text-sm text-accent-foreground">
                Enterprise Clients:
              </span>
              <span className="text-base font-semibold text-foreground">
                42
              </span>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}