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

export type PlanningGoal = 'max_time' | 'max_money' | 'balanced'

export interface PlanningGoalSelectorProps {
  value?: PlanningGoal
  onChange: (goal: PlanningGoal) => void
}

export function PlanningGoalSelector({ value, onChange }: PlanningGoalSelectorProps): ReactNode {
  const { t } = useTranslation()
  return (
    <div data-testid="planning-goal-selector" className="planning-goal-selector">
      <fieldset className="planning-goal-selector__fieldset">
        <legend className="planning-goal-selector__legend">{t('planningGoalSelector.legend')}</legend>

        <div className="planning-goal-selector__option">
          <input
            type="radio"
            id="goal-max-time"
            name="planning-goal"
            value="max_time"
            checked={value === 'max_time'}
            onChange={(e) => onChange(e.target.value as PlanningGoal)}
            data-testid="goal-max-time"
          />
          <label htmlFor="goal-max-time">{t('planningGoalSelector.maxTime')}</label>
          <small>{t('planningGoalSelector.maxTimeHelp')}</small>
        </div>

        <div className="planning-goal-selector__option">
          <input
            type="radio"
            id="goal-max-money"
            name="planning-goal"
            value="max_money"
            checked={value === 'max_money'}
            onChange={(e) => onChange(e.target.value as PlanningGoal)}
            data-testid="goal-max-money"
          />
          <label htmlFor="goal-max-money">{t('planningGoalSelector.maxMoney')}</label>
          <small>{t('planningGoalSelector.maxMoneyHelp')}</small>
        </div>

        <div className="planning-goal-selector__option">
          <input
            type="radio"
            id="goal-balanced"
            name="planning-goal"
            value="balanced"
            checked={value === 'balanced'}
            onChange={(e) => onChange(e.target.value as PlanningGoal)}
            data-testid="goal-balanced"
          />
          <label htmlFor="goal-balanced">{t('planningGoalSelector.balanced')}</label>
          <small>{t('planningGoalSelector.balancedHelp')}</small>
        </div>
      </fieldset>
    </div>
  )
}