import React from 'react';

type StatTone = 'amber' | 'violet' | 'green' | 'pink';

const TONE: Record<StatTone, { bg: string; fg: string }> = {
  amber:  { bg: 'var(--stat-amber-bg)',  fg: 'var(--stat-amber-fg)' },
  violet: { bg: 'var(--stat-violet-bg)', fg: 'var(--stat-violet-fg)' },
  green:  { bg: 'var(--stat-green-bg)',  fg: 'var(--stat-green-fg)' },
  pink:   { bg: 'var(--stat-pink-bg)',   fg: 'var(--stat-pink-fg)' },
};

interface Props {
  tone: StatTone;
  label: string;
  value: React.ReactNode;
  icon?: React.ReactNode;
}

export default function StatCard({ tone, label, value, icon }: Props) {
  const c = TONE[tone];
  return (
    <div
      style={{
        background: c.bg,
        borderRadius: 'var(--r-lg)',
        padding: '18px 20px',
        display: 'flex',
        alignItems: 'center',
        gap: 14,
      }}
    >
      {icon && (
        <div
          style={{
            width: 44, height: 44, borderRadius: 12, flexShrink: 0,
            background: c.fg, color: 'var(--on-primary)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}
        >
          {icon}
        </div>
      )}
      <div style={{ flex: 1, minWidth: 0, textAlign: 'right' }}>
        <div style={{ fontSize: 18, fontWeight: 800, color: 'var(--text)' }}>{value}</div>
        <div style={{ fontSize: 12.5, color: 'var(--text-2)', marginTop: 3 }}>{label}</div>
      </div>
    </div>
  );
}