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

interface StatCardProps {
  label: string;
  value: string | number;
  icon: LucideIcon;
  color: string;
  subtext?: string;
  onClick?: () => void;
}

const StatCard: React.FC<StatCardProps> = ({ label, value, icon: Icon, color, subtext, onClick }) => {
  return (
    <div 
      onClick={onClick}
      className="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow cursor-pointer group flex flex-col justify-between"
    >
      <div>
        <div className="flex items-start justify-between mb-4">
          <div className={`p-3 rounded-xl ${color} text-white shadow-lg shadow-current/10`}>
            <Icon size={24} />
          </div>
          <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{label}</span>
        </div>
        <div className="flex items-end justify-between">
          <h3 className="text-3xl font-black text-slate-900 tracking-tight">{value}</h3>
        </div>
      </div>
      
      {/* Decorative line with text requested by user */}
      <div className="mt-6 pt-4 border-t border-slate-50 flex items-center gap-3">
        <span className="text-[9px] font-black text-slate-400 uppercase tracking-widest whitespace-nowrap">
          {subtext || 'Live Status'}
        </span>
        <div className="flex-1 h-[1px] bg-slate-100 rounded-full"></div>
      </div>
    </div>
  );
};

export default StatCard;
