"use client"
import React, { useEffect, useState } from 'react'
import Menu from '../../components/menu/Menu';

const MenuPage = () => {
    const [categories, setCategories] = useState([]);
    const [menuItems, setMenuItems] = useState([]);

    useEffect(() => {
        fetch('/api/categories').then(res => {
            res.json().then(categories => setCategories(categories))
        });
        fetch('/api/menu-items').then(res => {
            res.json().then(menuItems => setMenuItems(menuItems))
        });

    }, []);

    

  return (
    <div className='pb-20 md:pb-40'>
        {categories?.length > 0 && categories.map(c => (
            <div key={c._id} className='px-10 min-[380px]:px-5 lg:px-10 py-5 sm:py-10'>
                <p className='text-center text-2xl sm:text-3xl md:text-4xl text-pink-500 uppercase font-bold drop-shadow-[0_2px_2px_rgba(105,105,105,1)]'>{c.name}</p>
                <div className='grid grid-cols-1 min-[380px]:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 min-[380px]:gap-5 mt-5 sm:mt-10'>
                    {menuItems.filter(item => item.category === c._id).map(item => (
                        <Menu key={item._id} {...item}/>
                    ))}
                </div>
            </div>
        ))}
    </div>
  )
}

export default MenuPage