import { Card, CardContent } from "@/shared/common/ui/card";
import { cn } from "@/super-admin/lib/utils";
import { LucideIcon, Building2, Clock, User } from "lucide-react";

interface StatCardProps {
  title: string;
  value: number;
  indicator?: string;
  color: string;
  icon: "building" | "clock" | "user";
  variant?: "primary" | "default";
  onClick?: () => void;
}

const iconMap: Record<string, LucideIcon> = {
  building: Building2,
  clock: Clock,
  user: User,
};

export const StatCard: React.FC<StatCardProps> = ({
  title,
  value,
  indicator,
  color,
  icon,
  variant = "default",
  onClick,
}) => {
  const Icon = iconMap[icon];

  return (
    <Card
      onClick={onClick}
      className={cn(
        "p-4 rounded-xl shadow-sm transition-colors",
        variant === "primary" ? "bg-primary text-white" : "bg-white dark:bg-gray-800 dark:border-gray-700",
        onClick && "cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700"
      )}
    >
      <CardContent className="p-0">
        <div className="flex justify-between items-center mb-4">
          <div className="text-sm font-medium opacity-80">{title}</div>
          <Icon className="w-5 h-5 opacity-60" />
        </div>
        <div className="text-3xl font-bold leading-snug">{value}</div>
        {indicator && (
          <div className={cn("text-xs mt-1", color)}>{indicator}</div>
        )}
      </CardContent>
    </Card>
  );
};
