"use client";

import type { MenuItemViewMode } from "@/components/listview/MenuItem";
import MenuItemRenderer from "@/components/listview/MenuItemRenderer";
import VerticalScrollView from "@/components/listview/VerticalScrollView";
import { Skeleton } from "@/components/ui/skeleton";

interface MenuSkeletonProps {
  viewMode?: MenuItemViewMode;
}

const MenuSkeleton = ({ viewMode = "list" }: MenuSkeletonProps) => {
  return (
    <div className="flex flex-col gap-4 items-center pt-8 mb-8">
      <div className="w-full">
        <Skeleton className="h-12 w-full rounded-xl mb-4" />
        <div className="flex gap-3 overflow-x-hidden py-4">
          {[...Array(5)].map((_, index) => (
            <Skeleton key={index} className="h-24 w-24 rounded-xl shrink-0" />
          ))}
        </div>
      </div>

      <section className="w-full">
        <div className="flex justify-between items-center mb-5">
          <Skeleton className="h-5 w-20 rounded-md" />
          <div className="flex gap-2">
            <Skeleton className="h-8 w-24 rounded-xl" />
            <Skeleton className="h-8 w-28 rounded-xl" />
          </div>
        </div>

        <VerticalScrollView className="mt-5! overflow-y-auto h-full">
          {viewMode === "grid" ? (
            <div className="grid grid-cols-2 gap-3">
              {[...Array(6)].map((_, index) => (
                <MenuItemRenderer key={index} variant="grid">
                  <div className="flex flex-col w-full h-full">
                    <Skeleton className="rounded-xl aspect-square max-h-[100px] w-full" />
                    <div className="mt-4">
                      <Skeleton className="h-5 w-full rounded-md mb-1" />
                      <Skeleton className="h-4 w-3/4 rounded-md" />
                    </div>
                    <div className="flex flex-col gap-2 mt-1">
                      <Skeleton className="h-4 w-16 rounded-md" />
                      <Skeleton className="w-full h-8 rounded-md mt-1" />
                    </div>
                  </div>
                </MenuItemRenderer>
              ))}
            </div>
          ) : (
            [...Array(6)].map((_, index) => (
              <MenuItemRenderer key={index} variant="list">
                <div className="flex gap-4 w-full min-h-28 items-stretch">
                  <Skeleton className="min-w-28 w-28 h-28 rounded-xl shrink-0 self-center" />
                  <div className="flex-1 flex flex-col justify-between min-w-0">
                    <div>
                      <Skeleton className="h-5 w-32 rounded-md mb-2" />
                      <Skeleton className="h-4 w-full rounded-md mb-1" />
                      <Skeleton className="h-4 w-3/4 rounded-md" />
                    </div>
                    <Skeleton className="h-4 w-16 rounded-md mt-2" />
                  </div>
                  <div className="flex flex-col justify-end shrink-0">
                    <Skeleton className="h-8 w-20 rounded-full" />
                  </div>
                </div>
              </MenuItemRenderer>
            ))
          )}
        </VerticalScrollView>
      </section>
    </div>
  );
};

export default MenuSkeleton;