/**
 * 統計卡片元件
 * 用於顯示各種統計資訊
 */

import { LucideIcon } from "lucide-react";

interface StatsCardProps {
  label: string;
  value: string | number;
  icon?: LucideIcon;
  valueClassName?: string;
}

export default function StatsCard({
  label,
  value,
  icon: Icon,
  valueClassName = "text-primary-main",
}: StatsCardProps) {
  return (
    <div className="bg-white rounded-lg shadow-sm border p-5">
      <div className="flex items-center gap-2 text-grey-2 mb-1">
        {Icon && <Icon className="h-4 w-4" />}
        <span>{label}</span>
      </div>
      <div className={valueClassName}>{value}</div>
    </div>
  );
}