import React from 'react'
import {useNavigate, useLocation, Link} from 'react-router-dom'

const Navbar = () => {
    const router = useNavigate();
    const location = useLocation();
    const path = location.pathname.split('/')


  return (
    <div className='flex justify-between items-center p-5 sm:p-10'>
        <Link to='/' className='flex gap-1 items-center'>
            <p className='text-2xl sm:text-4xl text-[#C400FF] font-semibold'>DALL-E</p> 
            <div className='font-bold text-[10px] sm:text-xs uppercase text-[#0CECDD]'>
                <p className='-mb-1 sm:mb-0'>Image</p>
                <p>Generator</p>
            </div>
        </Link>
        {
            path[1] === 'generate' ? (
                <button onClick={() => router('/')} className='p-2 border border-[#9F70FD] rounded-md text-[#E59BE9] font-semibold hover:bg-[#FFB5DA] hover:border-[#FFB5DA] hover:text-[#6420AA] duration-300 text-sm sm:text-base'>Expolre Images</button>
            ) : (
                <button onClick={() => router('/generate')} className='p-2 border border-[#82CD47] rounded-md text-[#F0FF42] font-semibold hover:bg-[#BFEA7C] hover:border-[#BFEA7C] hover:text-[#416D19] duration-300 text-sm sm:text-base'>Generate</button>
            )
        }
        
    </div>
  )
}

export default Navbar