import { ReactNode } from 'react'
import { useTranslation } from '@/i18n'

export interface KeyFiguresProps {
  /** `combinedDaysLeft` — days still available to plan, all parents. */
  daysLeft: number
  /** `combinedDaysUsed`. */
  daysUsed: number
  /** `combinedExpiringAtB4` — projected to be lost at the 4th birthday. */
  expiringAtB4: number
}

/**
 * The three headline figures under the hero — large tabular numerals with
 * a 14px label each, no tiles. The expiring figure wears danger ink only
 * when it is non-zero: a zero is good news and should read as quiet.
 */
export function KeyFigures({ daysLeft, daysUsed, expiringAtB4 }: KeyFiguresProps): ReactNode {
  const { t } = useTranslation()
  const figures = [
    { key: 'left', label: t('dashboard.figureLeft'), value: daysLeft, danger: false },
    { key: 'used', label: t('dashboard.figureUsed'), value: daysUsed, danger: false },
    { key: 'expiring', label: t('dashboard.figureExpiring'), value: expiringAtB4, danger: expiringAtB4 > 0 },
  ]
  return (
    <dl className="key-figures" data-testid="key-figures">
      {figures.map((figure) => (
        <div key={figure.key} className="key-figures__item" data-testid={`dashboard-figure-${figure.key}`}>
          <dt className="key-figures__label">{figure.label}</dt>
          <dd className={figure.danger ? 'key-figures__value key-figures__value--danger' : 'key-figures__value'}>
            {figure.value}
          </dd>
        </div>
      ))}
    </dl>
  )
}