---
import WeatherCard from '@components/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="max-w-340 2xl:max-w-fullpx-4 sm:px-6 lg:px-8 py-10 lg:py-14 mx-auto mb-2 md:mb-8">
  <div class="text-center max-w-2xl mx-auto mb-10 lg:mb-14">
    <h1 class="smooth-reveal card-text-header block">
      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">
    Sorry, {error.toLowerCase}
  </div>
  ) : (
  <div class="flex flex-wrap justify-center gap-4 lg:gap-6">
    {forecastDays.map((forecastDay, index) => (
    <div class={index === 3 ? "hidden min-[800px]:block" : index >= 4 ? "hidden min-[1100px]:block" : ""}>
      <WeatherCard
        dayName={forecastDay.dayName}
        label={forecastDay.label}
        icon={forecastDay.icon}
        temp={forecastDay.temp}
      />
    </div>
    ))}
  </div>
  )}
</section>