import Image from "next/image"
import Link from "next/link"

const DesktopHeader = () => {
    return (
        <>
        <div className="gap-4 pl-8 my-auto w-1/3 bg-text">
                <div className='flex justify-self-center'>
                    <Image src={'/Ryo.png'} alt={"Ryo"} width={40} height={40} />
                    <Image src={'/Kiki.png'} alt={"Ryo"} width={40} height={40} />
                </div>
                <div className='flex text-xs justify-self-center'>
                    <span className='cursor-pointer mr-2'>Se connecter</span> · <span className='cursor-pointer ml-2'>S'inscrire</span>
                </div>
            </div>
            <div className='my-auto text-4xl logo '>
                Monelia Nails
            </div>
            <div className='grid h-full'>
                <ul className='flex gap-8 self-center justify-self-end mr-8'>
                    <li><Link href='/'>Accueil</Link></li>
                    <li><Link href='/qui-suis-je'>Qui suis-je ?</Link></li>
                    <li><Link href='/prestations'>Mes prestations</Link></li>
                    <li><Link href='/formations'>Mes formations</Link></li>
                    <li><Link href='/contact'>Me contacter</Link></li>
                </ul>
            </div>
            </>
        )
}

export default DesktopHeader