import { Card, Typography } from "@mui/joy";

export type StatCardProps = {
  label: string;
  value: string;
  caption: string;
  statusColor?: "neutral" | "success" | "warning" | "danger";
};

export function StatCard({
  label,
  value,
  caption,
  statusColor = "neutral",
}: StatCardProps) {
  return (
    <Card variant="soft" color={statusColor}>
      <Typography level="title-sm" textColor="text.secondary">
        {label}
      </Typography>
      <Typography level="h2" mt={0.5}>
        {value}
      </Typography>
      <Typography level="body-sm" textColor="neutral.500">
        {caption}
      </Typography>
    </Card>
  );
}
