import { Link } from 'react-router-dom';
import { useWeather } from '../hooks/useWeather';
import styles from './WeatherWidget.module.css';

interface WeatherWidgetProps {
  city: string | null | undefined;
}

export function WeatherWidget({ city }: WeatherWidgetProps) {
  const { data, isLoading, isError } = useWeather(city);

  // Kein Ort im Profil -> Hinweis-Link
  if (!city || city.trim().length < 2) {
    return (
      <Link to="/profile" className={styles.hint}>
        Ort im Profil hinterlegen
      </Link>
    );
  }

  // Laden
  if (isLoading) {
    return (
      <div className={styles.weather}>
        <span className={styles.weatherLabel}>Wetter wird geladen...</span>
      </div>
    );
  }

  // Fehler -> nichts anzeigen (graceful degradation)
  if (isError || !data) {
    return null;
  }

  return (
    <div className={styles.weather}>
      {/* Zeile 1: Icon + Temperatur + Bezeichnung */}
      <div className={styles.weatherMain}>
        <span className={styles.weatherIcon}>{data.icon}</span>
        <span className={styles.weatherTemp}>
          {Math.round(data.temperature)}&deg;C
        </span>
        <span className={styles.weatherLabel}>{data.label}</span>
      </div>
      {/* Zeile 2: Ort zentriert */}
      <span className={styles.weatherCity}>{data.cityName}</span>
    </div>
  );
}
