Artifacts

import Link from "next/link";
import { ArrowUpRight, type LucideIcon } from "lucide-react";
import { Card } from "@/components/ui/card";

interface StatCardProps {
  label: string;
  value: number | string;
  sublabel?: string;
  icon: LucideIcon;
  href: string;
}

export function StatCard({ label, value, sublabel, icon: Icon, href }: StatCardProps) {
  return (
    <Link href={href} className="group block">
      <Card className="p-5 transition-all hover:border-foreground/20 hover:shadow-[0_2px_8px_rgba(16,24,40,0.06)]">
        <div className="flex items-start justify-between">
          <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-secondary">
            <Icon className="h-4 w-4 text-foreground/70" />
          </div>
          <ArrowUpRight className="h-4 w-4 text-muted-foreground/40 transition-colors group-hover:text-foreground" />
        </div>
        <div className="mt-4 text-3xl font-semibold tracking-tight tabular-nums">
          {value}
        </div>
        <div className="mt-1 text-[13px] font-medium text-foreground">{label}</div>
        {sublabel && (
          <div className="mt-0.5 text-xs text-muted-foreground">{sublabel}</div>
        )}
      </Card>
    </Link>
  );
}