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="text-az-muted block mb-0.5 text-[9px]">{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="w-full bg-az-bg border border-az-border rounded px-2 py-1 text-xs text-az-text outline-none focus:border-az-orange"
        />
      </div>
      <div className="flex-1">
        <label className="text-az-muted block mb-0.5 text-[9px]">{t('flights.planner.windSpeed')}</label>
        <input type="number" min={0}
          value={wind.speed}
          onChange={e => onChange({ ...wind, speed: Number(e.target.value) })}
          className="w-full bg-az-bg border border-az-border rounded px-2 py-1 text-xs text-az-text outline-none focus:border-az-orange"
        />
      </div>
    </div>
  )
}
