import { useTranslation } from 'react-i18next'
import type { WindParams } from './types'

interface Props {
  wind: WindParams
  onChange: (wind: WindParams) => void
}

export default function WindEffect({ wind, onChange }: Props) {
  const { t } = useTranslation()

  return (
    <div className="flex gap-2">
      <div className="flex-1">
        <label className="micro block mb-0.5">{t('flights.planner.windDirection')}</label>
        <input type="number" min={0} max={360}
          value={wind.direction}
          onChange={e => onChange({ ...wind, direction: Number(e.target.value) })}
          className="inp inp-mono w-full"
        />
      </div>
      <div className="flex-1">
        <label className="micro block mb-0.5">{t('flights.planner.windSpeed')}</label>
        <input type="number" min={0}
          value={wind.speed}
          onChange={e => onChange({ ...wind, speed: Number(e.target.value) })}
          className="inp inp-mono w-full"
        />
      </div>
    </div>
  )
}
