Clima.

<section class="ui-sample ui-content" data-weather="true"><header><strong>Santiago</strong> <time dateTime="2026-08-25T18:00:00-04:00">18:00 CLT</time></header><p><b>18 °C</b> · despejado</p><dl><div><dt>Máxima</dt><dd>21 °C</dd></div><div><dt>Viento</dt><dd>9 km/h SO</dd></div></dl><small>Fuente: Dirección Meteorológica de Chile</small></section>

<section class="ui-sample ui-content border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-weather="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Santiago</strong> <time dateTime="2026-08-25T18:00:00-04:00">18:00 CLT</time></header><p><b>18 °C</b> · despejado</p><dl class="grid gap-2"><div><dt>Máxima</dt><dd>21 °C</dd></div><div><dt>Viento</dt><dd>9 km/h SO</dd></div></dl><small class="text-sm text-slate-600">Fuente: Dirección Meteorológica de Chile</small></section>

export interface WeatherItem {
  /** Nombre del dato (`<dt>`): máxima, mínima, viento, humedad. */
  label: string;
  /** Valor con su unidad (`21 °C`, `9 km/h SO`). */
  value: string;
}

export interface WeatherProps {
  /** Ciudad o comuna del reporte. */
  location?: string;
  /** Momento de la medición en ISO 8601 con zona horaria (atributo `dateTime`). */
  dateTime?: string;
  /** Texto visible dentro de `<time>` (`18:00 CLT`); vacío oculta el `<time>`. */
  time?: string;
  /** Temperatura actual con unidad (`18 °C`). */
  temperature?: string;
  /** Condición del cielo en minúscula (`despejado`, `lluvia débil`); vacía la oculta. */
  condition?: string;
  /** Datos complementarios como pares etiqueta y valor. */
  items?: WeatherItem[];
  /** Origen del reporte, con su prefijo («Fuente: …»); vacío lo oculta. */
  source?: string;
  className?: string;
}

const WEATHER_ITEMS: WeatherItem[] = [
  { label: "Máxima", value: "21 °C" },
  { label: "Viento", value: "9 km/h SO" },
];

/**
 * Reporte del clima de una ciudad con hora de medición, temperatura, condición, datos complementarios y fuente, para portadas y secciones locales.
 *
 * @example <Weather temperature="12 °C" condition="lluvia débil" />
 * @example <Weather location="Valparaíso" dateTime="2026-08-25T09:00:00-04:00" time="09:00 CLT" items={[{ label: "Mínima", value: "8 °C" }]} />
 */
export function Weather({
  location = "Santiago",
  dateTime = "2026-08-25T18:00:00-04:00",
  time = "18:00 CLT",
  temperature = "18 °C",
  condition = "despejado",
  items = WEATHER_ITEMS,
  source = "Fuente: Dirección Meteorológica de Chile",
  className,
}: WeatherProps) {
  return (
    <section className={["ui-content", className].filter(Boolean).join(" ")} data-weather>
      {location || time ? (
        <header>
          {location ? <strong>{location}</strong> : null}
          {location && time ? " " : null}
          {time ? <time dateTime={dateTime || undefined}>{time}</time> : null}
        </header>
      ) : null}
      {temperature || condition ? (
        <p>
          {temperature ? <b>{temperature}</b> : null}
          {temperature && condition ? " · " : null}
          {condition}
        </p>
      ) : null}
      {items.length ? (
        <dl>
          {items.map((item, i) => (
            <div key={`${item.label}-${i}`}>
              <dt>{item.label}</dt>
              <dd>{item.value}</dd>
            </div>
          ))}
        </dl>
      ) : null}
      {source ? <small>{source}</small> : null}
    </section>
  );
}