const Navbar = () => {
    return (
        <div className="flex flex-row p-4 w-full items-center max-w-7xl">
            <div className="logo">
                <img className="dark:invert dark:hue-rotate-180" width={200} src='/logo-commit.png' />
            </div>
            <nav className='p-4 hidden sm:flex'>
                <a href="#about" className='text-sm mx-4 text-base-content/70 hover:text-blue-500'>О компании</a>
                <a href="#products" className='text-sm mx-4 text-base-content/70tent/70 hover:text-blue-500'>Программные продукты</a>
                <a href="#services" className='text-sm mx-4 text-base-content/70 hover:text-blue-500'>Услуги</a>
                <a href="#case" className='text-sm mx-4 text-base-content/70 hover:text-blue-500'>Главный кейс</a>
                <a href="#contacts" className='text-sm mx-4 text-base-content/70 hover:text-blue-500'>Контакты</a>
            </nav>
            <nav className="ml-auto sm:hidden">
                <div className="btn btn-square btn-ghost" onClick={() => {
                    const modal = document.getElementById('my_modal_2')
                    if (modal) {
                        (modal as HTMLDialogElement).showModal()
                    }
                }}>
                    <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M4 18L20 18" stroke="#000000" stroke-width="2" stroke-linecap="round" />
                        <path d="M4 12L20 12" stroke="#000000" stroke-width="2" stroke-linecap="round" />
                        <path d="M4 6L20 6" stroke="#000000" stroke-width="2" stroke-linecap="round" />
                    </svg>
                </div>
            </nav>
        </div>
    )
}

export default Navbar