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

export function MetricCard({ label, value, subtext }: Props) {
	return (
		<div className="rounded-lg border p-4">
			<p className="text-xs text-gray-500 uppercase tracking-wide">{label}</p>
			<p className="text-2xl font-bold mt-1">{value}</p>
			{subtext && (
				<p className="text-xs text-gray-400 mt-1 whitespace-pre-line">
					{subtext}
				</p>
			)}
		</div>
	);
}