Dashboard — Stats

"use client";

import { Card, CardContent } from "@/components/ui/card";

const STATS = [
  { label: "Total Revenue", value: "$45,231.89", change: "+20.1%", trend: "up" as const, icon: "$" },
  { label: "Subscriptions", value: "+2,350", change: "+180.1%", trend: "up" as const, icon: "👥" },
  { label: "Sales", value: "+12,234", change: "+19%", trend: "up" as const, icon: "💳" },
  { label: "Active Now", value: "+573", change: "+201", trend: "up" as const, icon: "🟢" },
];

export function DashboardStatsBlock() {
  return (
    <section className="p-6">
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {STATS.map((s) => (
          <Card key={s.label}>
            <CardContent className="p-5">
              <div className="flex items-center justify-between mb-2">
                <p className="text-sm font-medium text-muted-foreground">{s.label}</p>
                <span className="text-base opacity-50">{s.icon}</span>
              </div>
              <div className="text-2xl font-bold tracking-tight mb-1">{s.value}</div>
              <p className={`text-xs ${s.trend === "up" ? "text-emerald-600 dark:text-emerald-400" : "text-rose-600 dark:text-rose-400"}`}>
                {s.change} from last month
              </p>
            </CardContent>
          </Card>
        ))}
      </div>
    </section>
  );
}