import Link from "next/link";

interface StatsCardProps {
  icon: string;
  value: string | number;
  label: string;
  color?: string;
  href?: string;
  title?: string;
}

export default function StatsCard({ icon, value, label, color = "#00285d", href, title }: StatsCardProps) {
  const card = (
    <div className={`stats-card ${href ? "stats-card-link" : ""}`} title={title ?? (href ? `Ver tickets: ${label}` : undefined)}>
      <div className="d-flex align-items-center gap-3">
        <div className="stats-icon" style={{ backgroundColor: `${color}15`, color }}>
          <i className={`bi ${icon}`}></i>
        </div>
        <div>
          <div className="stats-value">{value}</div>
          <div className="stats-label">
            {label}
            {href && <i className="bi bi-arrow-right-circle ms-1" aria-hidden></i>}
          </div>
        </div>
      </div>
    </div>
  );
  if (href) {
    return (
      <Link href={href} className="text-decoration-none stats-card-anchor">
        {card}
      </Link>
    );
  }
  return card;
}