import { Card, CardContent } from "@/components/ui/card";
import { type LucideIcon } from "lucide-react";
interface StatCardProps {
title: string;
value: string | number;
icon: LucideIcon;
description?: string;
}
export function StatCard({ title, value, icon: Icon, description }: StatCardProps) {
return (
<Card>
<CardContent className="p-6">
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">{title}</p>
<p className="text-2xl font-bold mt-1">{value}</p>
{description && (
<p className="text-xs text-zinc-400 dark:text-zinc-500 mt-1">{description}</p>
)}
</div>
<div className="rounded-full bg-zinc-100 p-3 dark:bg-zinc-800">
<Icon size={20} className="text-zinc-600 dark:text-zinc-400" />
</div>
</div>
</CardContent>
</Card>
);
}
