Weather Widget

'use client';

import './WeatherWidgetCard.css';

/**
 * 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.
 */
export interface WeatherWidgetCardProps {
  temp: string;
  city: string;
  condition: string;
  icon: string;
}

export function WeatherWidgetCard({ temp, city, condition, icon }: WeatherWidgetCardProps) {
  return (
    <>
      <div className="weather-card" data-rk-877a33="">
        <div className="weather-card__temp" data-rk-877a33="">{temp}</div>
        <div className="weather-card__city" data-rk-877a33="">
          <h4 className="weather-card__name" data-rk-877a33="">{city}</h4>
          <p className="weather-card__cond" data-rk-877a33="">{condition}</p>
        </div>
        <div className="weather-card__icon" aria-hidden="true" data-rk-877a33="">{icon}</div>
      </div>
    </>
  );
}

export default WeatherWidgetCard;

/* WeatherWidgetCard — ported from astro-component-kit (cards/WeatherWidgetCard.astro) */

.weather-card:where([data-rk-877a33]) { 
  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:where([data-rk-877a33]) { font-size: 2.2rem; font-weight: 800; }
.weather-card__name:where([data-rk-877a33]) { margin: 0; font-size: 1rem; }
.weather-card__cond:where([data-rk-877a33]) { margin: 0; font-size: 0.8rem; opacity: 0.7; }
.weather-card__icon:where([data-rk-877a33]) { font-size: 2.5rem; margin-left: auto; }