"use client";

import { useTranslations } from "next-intl";
import Image from "next/image";
import Link from "next/link";
import NavItems from "./NavItems";
import UserDropdown from "./UserDropdown";

const Header = () => {
  const t = useTranslations();

  return (
    <header className="header sticky top-0">
      <div className="header-wrapper container">
        <Link href="/">
          <Image
            src="/logo.svg"
            alt={t("header.title")}
            width={100}
            height={100}
            className="h-8 w-auto cursor-pointer"
          />
        </Link>
        <nav className="hidden sm:block">
          <NavItems />
        </nav>
        <div className="mr-4 flex items-center gap-2">
          <Link href="/" locale="en" className="text-sm">
            EN
          </Link>
          <Link href="/" locale="de" className="text-sm">
            DE
          </Link>
          <Link href="/" locale="rus" className="text-sm">
            RU
          </Link>
        </div>
        <UserDropdown />
      </div>
    </header>
  );
};

export default Header;