import styles from './KpiTile.module.scss';

interface KpiTileProps {
  label: string;
  value: string | number;
  tone?: 'primary' | 'success' | 'warning' | 'danger' | 'neutral';
  hint?: string;
}

export default function KpiTile({ label, value, tone = 'primary', hint }: KpiTileProps) {
  return (
    <div className={styles.tile} data-tone={tone}>
      <div className={styles.value}>{value}</div>
      <div className={styles.label}>{label}</div>
      {hint && <div className={styles.hint}>{hint}</div>}
    </div>
  );
}