import React from "react";

type Props = {
  label: string;
  value: number;
  icon: React.ReactNode;
  color?: string;
  iconColor?: string;
};

export default function StatCard({ label, value, icon, color = "#bfdbfe", iconColor = "#3b82f6" }: Props) {
  return (
    <div style={{
      background: "#fff",
      borderRadius: 12,
      padding: "20px 24px",
      boxShadow: "2px 3px 4px rgba(0,0,0,0.07)",
      display: "flex",
      justifyContent: "space-between",
      alignItems: "center",
    }}>
      <div>
        <p style={{ margin: 0, fontSize: 13, color: "#94a3b8", marginBottom: 6 }}>{label}</p>
        <p style={{ margin: 0, fontSize: 26, fontWeight: 700, color: "#1e293b" }}>{value}</p>
      </div>
      <div style={{
        width: 44, height: 44, borderRadius: "50%",
        background: color,
        display: "flex", alignItems: "center", justifyContent: "center",
        color: iconColor,
      }}>
        {icon}
      </div>
    </div>
  );
}