import { WeatherWidgetIcon } from './weather-widget-icon';
import { WeatherDayProps } from './weather.interface';

const WeatherTypes = {
  RAINY: 'дождь',
  CLOUDY: 'облачно',
  PARTLYCLOUDY: 'переменная облачность',
  SNOW: 'снег',
  SNOWY: 'идет снег',
  SUNNY: 'солнце',
  THUNDER: '',
  UNKNOWN: 'неизвестно',
};

export function WeatherWidgetToday(props: WeatherDayProps) {
  const { temperature, condition } = props;

  const wType = WeatherTypes[condition as keyof typeof WeatherTypes] ?? WeatherTypes.UNKNOWN;

  return (
    <div
      style={{
        textAlign: 'center',
        width: '50%',
      }}
    >
      <div>
        <WeatherWidgetIcon icon={condition} size={72} />
      </div>
      <div
        style={{
          fontSize: 52,
          lineHeight: '61px',
          fontWeight: '600',
          letterSpacing: '-.075',
        }}
        children={`${temperature ?? '--'}°`}
      />
      <div
        style={{
          fontSize: 16,
          lineHeight: '18.75px',
        }}
        children={wType}
      />
    </div>
  );
}