import React from "react";
import { AlertTriangle, TrendingUp, Users, DollarSign, Shield } from "lucide-react";

export default function AttentionCard({ icon: Icon, label, value, sublabel, severity = "normal", onClick }) {
  const colorMap = {
    critical: "border-red-200 bg-red-50 text-red-700",
    high: "border-orange-200 bg-orange-50 text-orange-700",
    medium: "border-yellow-200 bg-yellow-50 text-yellow-700",
    normal: "border-slate-200 bg-white text-slate-700",
  };

  return (
    <button
      onClick={onClick}
      className={`text-left p-4 rounded-xl border-2 transition-all hover:shadow-md ${colorMap[severity]} ${onClick ? "cursor-pointer hover:border-slate-300" : "cursor-default"}`}
    >
      <div className="flex items-start justify-between mb-1">
        <Icon className="w-4 h-4 opacity-70" />
        {severity !== "normal" && (
          <span className={`text-[9px] font-bold uppercase tracking-wide px-1.5 py-0.5 rounded-full ${colorMap[severity]}`}>
            {severity}
          </span>
        )}
      </div>
      <p className="text-2xl font-black leading-none">{value}</p>
      <p className="text-[11px] mt-1 opacity-80">{label}</p>
      {sublabel && <p className="text-[10px] mt-0.5 opacity-60">{sublabel}</p>}
    </button>
  );
}