import React from 'react';
import Sparkline from './Sparkline';

const TONES = {
  default: { iconBg: 'pr:bg-slate-50', iconText: 'pr:text-slate-600', badge: 'pr:bg-slate-100 pr:text-slate-700' },
  brand: { iconBg: 'pr:bg-orange-50', iconText: 'pr:text-orange-600', badge: 'pr:bg-orange-50 pr:text-orange-700 pr:ring-1 pr:ring-orange-100' },
  success: { iconBg: 'pr:bg-emerald-50', iconText: 'pr:text-emerald-600', badge: 'pr:bg-emerald-50 pr:text-emerald-700 pr:ring-1 pr:ring-emerald-100' },
  warning: { iconBg: 'pr:bg-amber-50', iconText: 'pr:text-amber-600', badge: 'pr:bg-amber-50 pr:text-amber-700 pr:ring-1 pr:ring-amber-100' },
  danger: { iconBg: 'pr:bg-red-50', iconText: 'pr:text-red-600', badge: 'pr:bg-red-50 pr:text-red-700 pr:ring-1 pr:ring-red-100' },
  info: { iconBg: 'pr:bg-blue-50', iconText: 'pr:text-blue-600', badge: 'pr:bg-blue-50 pr:text-blue-700 pr:ring-1 pr:ring-blue-100' },
};

/**
 * StatCard — the dashboard-baseline metric card.
 *
 * <StatCard
 *   icon={ExclamationTriangleIcon}
 *   tone="warning"
 *   value="1,072"
 *   label="SEO Issues"
 *   badge="actionable"
 *   trend={[64, 66, 70, 68, 74]}    // optional sparkline
 *   footer={<span>…</span>}          // optional bottom slot
 * />
 */
const StatCard = ({
  icon: Icon = null,
  tone = 'default',
  value,
  label,
  badge = null,
  trend = null,
  trendTone = 'success',
  footer = null,
  className = '',
}) => {
  const t = TONES[tone] || TONES.default;

  return (
    <div className={`pr:bg-white pr:rounded-2xl pr:shadow-xs pr:border pr:border-slate-200 pr:p-5 pr:flex pr:flex-col pr:justify-between ${className}`}>
      <div className="pr:flex pr:items-start pr:justify-between pr:gap-3">
        {Icon && (
          <div className={`pr:p-2.5 pr:rounded-xl ${t.iconBg}`}>
            <Icon className={`pr:w-5 pr:h-5 ${t.iconText}`} aria-hidden="true" />
          </div>
        )}
        {badge && (
          <span className={`pr:inline-flex pr:items-center pr:rounded-full pr:px-2.5 pr:py-1 pr:text-xs pr:font-semibold ${t.badge}`}>
            {badge}
          </span>
        )}
      </div>
      <div className="pr:mt-4 pr:flex pr:items-end pr:justify-between pr:gap-3">
        <div>
          <p className="pr:text-3xl pr:font-black pr:text-slate-950">{value}</p>
          <p className="pr:text-sm pr:font-medium pr:text-slate-500">{label}</p>
        </div>
        {Array.isArray(trend) && trend.length > 1 && (
          <Sparkline data={trend} tone={trendTone} className="pr:mb-1" />
        )}
      </div>
      {footer && <div className="pr:mt-4">{footer}</div>}
    </div>
  );
};

export default StatCard;