import React from 'react'
import Image from 'next/image'
import Link from 'next/link'
import Burger from './ui/Burger'
import LangSwitcher from './LangSwitcher'
import UserLogin from './UserLogin'

const Header = () => {
  return (
    <div className="flex justify-between items-center px-6 py-8 w-[93%] mx-auto">
      <div className="flex items-center justify-center space-x-10">
        <Link href="/">
          <Image
            src="/images/logo.png"
            alt="logo"
            width={50}
            height={50}
            priority
          />
        </Link>
        <div className="hidden md:block">
          <Burger />
        </div>
        <Link
          href="/account/create-as-deliveler"
          className="text-base font-medium px-4 hover:text-orange transition-colors hidden md:block"
        >
          Могу взять посылку
        </Link>
      </div>
      <div className="flex items-center justify-center space-x-10">
        <LangSwitcher />
        <Link
          href="/account/create-as-sender"
          className="hidden md:block bg-orange hover:bg-orange/80 px-4 py-3 text-white rounded-2xl "
        >
          Разместить объявление
        </Link>

        <UserLogin />

        <div className="flex items-center space-x-4 md:hidden">
          <Burger />
        </div>
      </div>
    </div>
  )
}

export default Header