admin/src/components/StatCard.tsx

import { Box, Card, CardContent, Stack, Typography } from "@mui/material";
import type { ReactNode } from "react";

interface Props {
  label: string;
  value: ReactNode;
  icon: ReactNode;
  color?: string;
  hint?: string;
}

export default function StatCard({ label, value, icon, color = "#4F46E5", hint }: Props) {
  return (
    <Card sx={{ height: "100%" }}>

      <CardContent>

        <Stack direction="row" justifyContent="space-between" alignItems="flex-start">

          <Box>

            <Typography variant="body2" color="text.secondary" fontWeight={600}>

              {label}

            </Typography>

            <Typography variant="h4" sx={{ mt: 1 }}>

              {value}

            </Typography>

            {hint && (

              <Typography variant="caption" color="text.secondary">

                {hint}

              </Typography>

            )}

          </Box>

          <Box

            sx={{

              width: 48,

              height: 48,

              borderRadius: 2.5,

              display: "grid",

              placeItems: "center",

              bgcolor: `${color}1A`,

              color,

            }}

          >

            {icon}

          </Box>

        </Stack>

      </CardContent>

    </Card>
  );
}