import { Link } from '@inertiajs/react';
import { formatCount } from '@/lib/formatters';

type Tone = 'primary' | 'info' | 'warning' | 'danger' | 'violet';

type Props = {
  icon: string;
  label: string;
  value: number | string;
  hint?: string;
  tone?: Tone;
  href?: string;
};

/** کارت آماری با آیکون رنگی و عدد فارسی. با href کل کارت لینک می‌شود. */
export function StatCard({ icon, label, value, hint, tone = 'primary', href }: Props) {
  const body = (
    <>
      <span className={`stat-card-icon tone-${tone}`}>
        <i className={`bi ${icon}`} aria-hidden="true" />
      </span>
      <span className="stat-card-body">
        <span>{label}</span>
        <strong>{typeof value === 'number' ? formatCount(value) : value}</strong>
        {hint && <small>{hint}</small>}
      </span>
    </>
  );

  if (href) {
    return <Link href={href} className="stat-card">{body}</Link>;
  }
  return <article className="stat-card">{body}</article>;
}