"use client"

import {
  Database,
  Zap,
  DollarSign,
  AlertTriangle,
  Activity,
  CheckCircle2,
  Clock,
} from "lucide-react"
import { InfoIcon } from "./info-icon"
import { cn } from "@/lib/utils"

const variantStyles = {
  default: "",
  success: "border-l-4 border-green-500",
  warning: "border-l-4 border-yellow-500",
  error: "border-l-4 border-red-500",
}

// Icon mapping - add more icons as needed
const iconMap = {
  Database,
  Zap,
  DollarSign,
  AlertTriangle,
  Activity,
  CheckCircle2,
  Clock,
} as const

type IconName = keyof typeof iconMap

interface StatCardProps {
  label: string
  value: string | number
  helpText?: string
  icon?: IconName
  variant?: "default" | "success" | "warning" | "error"
  className?: string
}

export function StatCard({ label, value, helpText, icon, variant = "default", className }: StatCardProps) {
  const IconComponent = icon ? iconMap[icon] : null

  return (
    <div
      className={cn(
        "bg-white dark:bg-gray-800 rounded-lg shadow p-5 border border-gray-200 dark:border-gray-700",
        "hover:scale-[1.02] hover:shadow-lg transition-all duration-200",
        variantStyles[variant],
        className,
      )}
    >
      <div className="flex items-start justify-between">
        <div className="flex-1">
          <div className="flex items-center gap-2 mb-1">
            {IconComponent && <IconComponent className="h-4 w-4 text-gray-500 dark:text-gray-400" />}
            <div className="text-sm text-gray-600 dark:text-gray-400 font-medium flex items-center gap-1.5">
              {label}
              {helpText && <InfoIcon content={helpText} side="top" />}
            </div>
          </div>
          <div className="text-2xl font-bold text-gray-900 dark:text-white">
            {value}
          </div>
        </div>
      </div>
    </div>
  )
}
