import { useMenus } from "~/lib/api";
import { DailyMenu } from "./menu-card";
import { DateTime } from "luxon";
import { useState } from "react";
import DayNavigation from "./day-navigation";

export default function Menus() {
  const { isLoading, error, menus } = useMenus();
  const [date, setDate] = useState(DateTime.now().startOf("day"));

  const findMenuForDate = (date: DateTime) => {
    return menus?.find((menu: any) => {
      const menuDate = DateTime.fromISO(menu.date).startOf("day");
      return menuDate.equals(date);
    });
  };

  return (
    <div className="space-y-4">
      {isLoading && <p>Chargement des menus...</p>}
      {error && (
        <p className="text-red-500">Erreur lors du chargement des menus.</p>
      )}
      {menus && menus.length === 0 && <p>Aucun menu disponible.</p>}

      {/* Menus */}
      <DayNavigation startDate={date} setStartDate={setDate} />
      <DailyMenu meals={findMenuForDate(date)?.meals || []} />
    </div>
  );
}