import { Card, CardContent } from "@/components/ui/card";

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

/**
 * Compact metric tile: label / value / optional subtext on the comfortable
 * density ramp (label `text-sm`, value `text-lg font-semibold`, subtext
 * `text-xs text-muted-foreground`). Same exported props as the MUI version.
 */
export function MetricCard({ label, value, subtext }: Props) {
	return (
		<Card className="h-full">
			<CardContent className="flex h-full flex-col gap-1.5">
				<span className="text-sm uppercase leading-tight tracking-wide text-muted-foreground">
					{label}
				</span>
				<span className="text-lg font-semibold leading-tight">{value}</span>
				{subtext ? (
					<span className="whitespace-pre-line text-xs leading-relaxed text-muted-foreground">
						{subtext}
					</span>
				) : null}
			</CardContent>
		</Card>
	);
}