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

interface Props {
	label: string;
	value: string;
	subtext?: string;
}

export function MetricCard({ label, value, subtext }: Props) {
	return (
		<Card variant="outlined" sx={{ height: "100%" }}>
			<CardContent
				sx={{
					p: { xs: 1.5, sm: 2 },
					display: "flex",
					flexDirection: "column",
					gap: 0.5,
					height: "100%",
				}}
			>
				<Typography
					variant="caption"
					color="text.secondary"
					sx={{ textTransform: "uppercase", lineHeight: 1.2 }}
				>
					{label}
				</Typography>
				<Typography
					variant="h5"
					sx={{
						fontWeight: 700,
						fontSize: { xs: "1.05rem", sm: "1.5rem" },
						lineHeight: 1.15,
					}}
				>
					{value}
				</Typography>
				{subtext && (
					<Typography
						variant="caption"
						color="text.secondary"
						sx={{ whiteSpace: "pre-line", display: "block", lineHeight: 1.35 }}
					>
						{subtext}
					</Typography>
				)}
			</CardContent>
		</Card>
	);
}