import { Helmet } from 'react-helmet-async';
import { type Language, t } from '../translations';

interface Props {
  language: Language;
}

const WeatherRadar = ({ language }: Props) => {
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
      <Helmet>
        <title>{t[language].sidebar.radar} | Hladinátor</title>
      </Helmet>
      
      <div style={{ padding: '0 1.5rem 1rem' }}>
        <h1 style={{ fontSize: '1.75rem', fontWeight: 'bold', margin: '0 0 0.5rem 0', color: 'var(--text-main)' }}>
          {t[language].sidebar.radar}
        </h1>
        <p style={{ margin: 0, color: 'var(--text-muted)' }}>
          {language === 'cs' ? 'Aktuální srážkový radar a předpověď počasí pro celou ČR.' : 'Current precipitation radar and weather forecast for the Czech Republic.'}
        </p>
      </div>

      <div style={{ flex: 1, minHeight: '600px', borderRadius: '12px', overflow: 'hidden', margin: '0 1.5rem 1.5rem 1.5rem', border: '1px solid var(--border-color)', backgroundColor: 'var(--bg-card)' }}>
        <iframe 
          width="100%" 
          height="100%" 
          src={`https://embed.windy.com/embed.html?type=map&location=coordinates&metricRain=mm&metricTemp=%C2%B0C&metricWind=km/h&zoom=7&overlay=radar&product=radar&level=surface&lat=49.8&lon=15.5&message=true&lang=${language}`}
          frameBorder="0"
          title="Windy Weather Radar"
          style={{ display: 'block' }}
          allowFullScreen
        ></iframe>
      </div>
    </div>
  );
};

export default WeatherRadar;
