import React from 'react'
import { LucideIcon } from 'lucide-react'

interface StatsCardProps {
  label: string
  value: string | number
  icon: LucideIcon
  iconColor: string
  iconBgColor: string
  onClick?: () => void
  isLoading?: boolean
}

export const StatsCard: React.FC<StatsCardProps> = ({
  label,
  value,
  icon: Icon,
  iconColor,
  iconBgColor,
  onClick,
  isLoading = false,
}) => {
  return (
    <div
      className={`bg-warm-card border border-warm-border rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow ${
        onClick ? 'cursor-pointer' : ''
      }`}
      onClick={onClick}
      role={onClick ? 'button' : undefined}
      tabIndex={onClick ? 0 : undefined}
      onKeyDown={onClick ? (e) => e.key === 'Enter' && onClick() : undefined}
    >
      <div className="flex items-center justify-between mb-4">
        <div className={`p-3 rounded-lg ${iconBgColor}`}>
          <Icon className={iconColor} size={24} />
        </div>
      </div>
      <p className="text-2xl font-bold text-warm-text-primary mb-1">
        {isLoading ? '...' : value}
      </p>
      <p className="text-sm text-warm-text-muted">{label}</p>
    </div>
  )
}