'use client';

import { Skeleton } from '@/components/ui/skeleton';
import MenuItemRenderer from '@/components/listview/MenuItemRenderer';

export const CartItemsSkeleton = () => {
  return (
    <div className='flex-1 space-y-4'>
      {[...Array(3)].map((_, index) => (
        <MenuItemRenderer key={index}>
          <div className='flex gap-4 w-full h-full items-center'>
            <Skeleton className='min-w-28 w-28 h-28 rounded-xl' />
            <div className='w-full inline-flex flex-col justify-between'>
              <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>
              <div className='inline-flex mt-2 gap-2 justify-between w-full items-center'>
                <div className='w-full flex flex-col gap-1'>
                  <Skeleton className='h-4 w-16 rounded-md' />
                  <Skeleton className='h-4 w-20 rounded-md mt-1' />
                </div>
                <Skeleton className='max-w-[115px] w-full h-8 rounded-md' />
              </div>
            </div>
          </div>
        </MenuItemRenderer>
      ))}
    </div>
  );
};

export const CartSummarySkeleton = () => {
  return (
    <>
      <div className='mt-2'>
        <div className='relative'>
          <Skeleton className='h-5 w-32 rounded-md mb-4' />
          <Skeleton className='w-full h-24 rounded-normal' />
        </div>
      </div>

      <div className='fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-border p-4 w-full'>
        <div className='flex justify-between items-center gap-4'>
          <div className='flex flex-col'>
            <Skeleton className='h-3 w-24 rounded-md mb-2' />
            <Skeleton className='h-5 w-32 rounded-md' />
          </div>
          <Skeleton className='h-10 w-32 rounded-md' />
        </div>
      </div>
    </>
  );
};

const CartSkeleton = () => {
  return (
    <>
      <CartItemsSkeleton />
      <CartSummarySkeleton />
    </>
  );
};

export default CartSkeleton;

