import type { StatItem } from '../../types';
import { DataIcon } from '../icons/DataIcon';

const TONE_CLASSES: Record<StatItem['tone'], string> = {
  brand: 'bg-selected text-brand-soft',
  success: 'bg-success/16 text-success',
  violet: 'bg-violet/16 text-violet',
};

export function StatCard({ stat }: { stat: StatItem }) {
  return (
    <div className="rounded-2xl border border-line bg-panel p-[18px] backdrop-blur-md">
      <div className="mb-3.5 flex items-center justify-between gap-2.5">
        <span className="text-[12.5px] font-semibold text-ink-soft">{stat.label}</span>
        <span className={`flex h-7 w-7 items-center justify-center rounded-[9px] ${TONE_CLASSES[stat.tone]}`}>
          <DataIcon name={stat.icon} size={15} />
        </span>
      </div>
      <p className="m-0 mb-1 text-[27px] font-extrabold tracking-tight text-ink">{stat.value}</p>
      <p className="m-0 text-xs text-ink-soft">{stat.note}</p>
    </div>
  );
}