import type { ReactNode } from "react";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Card from "./Card";
import { iconBadgeSx } from "../theme";

export type StatCardColor =
  | "default"
  | "primary"
  | "success"
  | "warning"
  | "error"
  | "info";

export interface StatCardProps {
  label: string;
  value: ReactNode;
  icon?: ReactNode;
  color?: StatCardColor;
  footer?: ReactNode;
}

/**
 * KPI / metric tile. Dense Soft-SaaS look: tinted icon square, big value,
 * small uppercase label, optional footer caption.
 */
export default function StatCard({
  label,
  value,
  icon,
  color = "default",
  footer,
}: StatCardProps) {
  return (
    <Card>
      <Box sx={{ display: "flex", alignItems: "flex-start", gap: 1.5 }}>
        {icon && (
          <Box
            sx={[
              {
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                width: 40,
                height: 40,
                borderRadius: 2,
                flexShrink: 0,
              },
              iconBadgeSx(color),
            ]}
          >
            {icon}
          </Box>
        )}
        <Box sx={{ minWidth: 0 }}>
          <Typography
            variant="h5"
            sx={{ fontFamily: "'DM Mono', Menlo, monospace", lineHeight: 1.2 }}
          >
            {value}
          </Typography>
          <Typography
            variant="caption"
            color="text.secondary"
            sx={{
              textTransform: "uppercase",
              letterSpacing: ".06em",
              fontWeight: 600,
            }}
          >
            {label}
          </Typography>
        </Box>
      </Box>
      {footer && (
        <Box sx={{ mt: 1.5, pt: 1.5, borderTop: 1, borderColor: "divider" }}>
          <Typography variant="caption" color="text.secondary">
            {footer}
          </Typography>
        </Box>
      )}
    </Card>
  );
}