import OrderComponent from "@/components/order";
import { useMenu } from "@/hooks/useMenu";
import ErrorMessage from "./ErrorPage";
import LoadingPage from "./Loading";

export default function Order() {
  const { data: menu, isLoading } = useMenu();
  if (isLoading) {
    return <LoadingPage />;
  }
  if (!menu) {
    return <ErrorMessage>메뉴를 불러오지 못했습니다.</ErrorMessage>;
  }

  const categories = [...(new Set(menu.map(item => item.category)))];
  return (
    <div className="p-4">
      <OrderComponent menus={menu} categories={categories} />
    </div>
  );
}