import React from 'react'

interface MobileMenuProps {
    visible?: boolean;
}

const MobileMenu: React.FC<MobileMenuProps> = ({visible}) => {
    if(!visible){
        return null;
    }
    return (
    <div className='bg-black w-56 absolute top-8 left-0 py-5 flex flex-col border-2 border-gray-800'>
        <div className='flex flex-col gap-4'>
            <div className='px-3 text-center text-white hover:underline'>
                Home
            </div>
            <div className='px-3 text-center text-white hover:underline'>
                Serie TV
            </div>
            <div className='px-3 text-center text-white hover:underline'>
                Film
            </div>
            <div className='px-3 text-center text-white hover:underline'>
                Nuovi e Popolari
            </div>
            <div className='px-3 text-center text-white hover:underline'>
                La mia Lista
            </div>
            <div className='px-3 text-center text-white hover:underline'>
                Sfoglia per lingua
            </div>
        </div>
    </div>
  )
}

export default MobileMenu