"use client";

import Link from "next/link";
import { ArrowRightIcon } from "@heroicons/react/24/outline";

export function StatCard({
  title,
  value,
  icon: Icon,
  href,
  tone = "neutral",
}: {
  title: string;
  value: string | number;
  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
  href: string;
  tone?: "neutral" | "primary" | "info" | "success" | "warning";
}) {
  const toneStyles: Record<
    NonNullable<Parameters<typeof StatCard>[0]["tone"]>,
    { iconWrap: string; icon: string }
  > = {
    neutral: { iconWrap: "bg-muted/50", icon: "text-muted-foreground" },
    primary: { iconWrap: "bg-primary/10", icon: "text-primary" },
    info: { iconWrap: "bg-info/10", icon: "text-info" },
    success: { iconWrap: "bg-success/10", icon: "text-success" },
    warning: { iconWrap: "bg-warning/10", icon: "text-warning" },
  };

  const styles = toneStyles[tone];
  return (
    <Link
      href={href}
      className="group flex items-center gap-4 p-4 rounded-xl hover:bg-muted/50 transition-colors"
      aria-label={`${title}: ${value}`}
    >
      <div
        className={`flex-shrink-0 h-10 w-10 rounded-xl flex items-center justify-center ${styles.iconWrap}`}
        aria-hidden="true"
      >
        <Icon className={`h-5 w-5 ${styles.icon}`} />
      </div>

      <div className="min-w-0 flex-1">
        <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">{title}</p>
        <p className="text-2xl font-bold text-foreground mt-0.5 tabular-nums">{value}</p>
      </div>

      <ArrowRightIcon className="h-4 w-4 text-muted-foreground/40 group-hover:text-foreground group-hover:translate-x-0.5 transition-all" />
    </Link>
  );
}
