"use client"
import React from 'react'
import UserTab from '../../components/layout/UserTab'
import useProfile from '../../components/UseProfile'

const MenuItemsPage = () => {
    const {loading, data} = useProfile();




    if(loading){
        return <p className='flex justify-center items-center'>Loading...</p>
    }
    if(!data.admin){
        return <p className='flex justify-center items-center'>Please login as an admin</p>
    }
    
  return (
    <div className='px-5 mb-10 max-w-md mx-auto'>
        <UserTab isAdmin={true}/>
        <form className='mt-10'>
            <div className='flex flex-col'>
                <label className='-mb-1 text-gray-700 font-semibold text-sm flex'>Items name</label>
                <div className='flex gap-2 items-center'>
                    <div className='grow'>
                        <input type='text' placeholder='Enter items name'/>
                    </div>
                    <div>
                        <button type='submit' className='bg-pink-500 text-white p-2 rounded-md hover:opacity-80 duration-300'>Create</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
  )
}

export default MenuItemsPage