Weather Widget

---
/**
 * WeatherWidgetCard — Glassmorphism card showing weather conditions.
 * 
 * @param {string} temp - The formatted temperature (e.g. "24°").
 * @param {string} city - The location name.
 * @param {string} condition - Short weather condition string (e.g. "Partly Cloudy").
 * @param {string} icon - Emoji or symbol representing the weather.
 */
interface Props {
  temp: string;
  city: string;
  condition: string;
  icon: string;
}

const { temp, city, condition, icon } = Astro.props;
---

<div class="weather-card">
  <div class="weather-card__temp">{temp}</div>
  <div class="weather-card__city">
    <h4 class="weather-card__name">{city}</h4>
    <p class="weather-card__cond">{condition}</p>
  </div>
  <div class="weather-card__icon" aria-hidden="true">{icon}</div>
</div>

<style>
  .weather-card { 
    display: flex; align-items: center; gap: var(--sp-6, 1.5rem); 
    padding: var(--sp-6, 1.5rem); 
    background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(192,132,252,0.2)); 
    backdrop-filter: blur(20px); 
    border: 1px solid var(--c-border, rgba(255,255,255,0.15)); 
    border-radius: var(--r-xl, 24px); 
    color: var(--c-text-1, #fff); 
  }
  .weather-card__temp { font-size: 2.2rem; font-weight: 800; }
  .weather-card__name { margin: 0; font-size: 1rem; }
  .weather-card__cond { margin: 0; font-size: 0.8rem; opacity: 0.7; }
  .weather-card__icon { font-size: 2.5rem; margin-left: auto; }
</style>