import { useTranslation } from 'react-i18next';
import InfoPopup from './InfoPopup';
import { useTranslatedModes, type TransportMode } from '../../hooks/useTravelTime';

export function TravelTimeInfoPopup({
  mode,
  onClose,
}: {
  mode: TransportMode;
  onClose: () => void;
}) {
  const { t } = useTranslation();
  const modes = useTranslatedModes();

  return (
    <InfoPopup title={t('travel.travelTime', { mode: modes.label(mode) })} onClose={onClose}>
      <p className="text-sm text-warm-700 dark:text-warm-300 leading-relaxed">
        {t('travelInfo.mainDesc')} {modes.desc(mode)}. {t('travelInfo.sliderHint')}
      </p>
    </InfoPopup>
  );
}
