---
import WeatherCard from '@components/ui/cards/WeatherCard.astro';
import { getFiveDayForecast } from '@support/weather';

const { latitude = "44.95", longitude = "-93.09", cityName = "St. Paul, Minnesota", timezone = "America/Chicago" } = Astro.props;
const { forecastDays, error } = await getFiveDayForecast(latitude, longitude, timezone);
---

<section class="mx-auto mb-20 max-w-340 px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full">
  <div class="mx-auto mb-10 max-w-2xl text-center lg:mb-14">
    <h1 class="card-text-header smooth-reveal block font-bold md:leading-tight">
      Weather in my Area 
    </h1>
    <div class="smooth-reveal mx-auto mt-5 max-w-3xl text-center">
      <span class="card-text-header-description">
        Five day forecast for {cityName}
      </span>
    </div>
  </div>

  {error ? (
  <div class="card-base p-10 text-accent text-center">
    {error}
  </div>
  ) : (
  <div class="flex flex-wrap justify-center gap-4 lg:gap-6">
    {forecastDays.map((forecastDay) => (
    <WeatherCard
      dayName={forecastDay.dayName}
      label={forecastDay.label}
      icon={forecastDay.icon}
      temp={forecastDay.temp}
    />
    ))}
  </div>
  )}
</section>