import { Forecast } from "@/types/types";
import DailyCard from "./DailyCard";

export default function CardContainer(props: { weather: Forecast }) {
  const weather = props.weather;
  return (
    <div className="p-2 flex overflow-x-scroll md:overflow-hidden md:justify-center w-full">
      {weather.daily &&
        weather.daily.apparent_temperature_max.map(
          (temp, index) =>
            index > 0 &&
            index < 7 && ( // Ensure we only render the next 6 days
              <DailyCard
                key={index}
                temperature={temp}
                weatherCode={weather.daily.weather_code[index]}
                time={weather.daily.time[index]}
              />
            )
        )}
    </div>
  );
}