import { Link } from 'react-router-dom';
import { ArrowUpRight } from 'lucide-react';
export default function MetricCard({ label, value, to, detail }) { return <Link to={to} className="panel group block p-5 transition hover:-translate-y-0.5 hover:border-violet-400/30 focus-visible:ring-2 focus-visible:ring-violet-400"><div className="flex items-start justify-between"><p className="text-sm leading-5 text-slate-400">{label}</p><ArrowUpRight className="h-4 w-4 text-slate-600 transition group-hover:text-violet-400"/></div><p className="mt-4 text-3xl font-semibold tabular-nums text-white">{value}</p>{detail && <p className="mt-2 text-xs text-slate-500">{detail}</p>}</Link> }