"use client";

import { Button } from "@/components/ui/button";
import Image from "next/image";
import Link from "next/link";
import { User, Menu } from "lucide-react";
import AuthDialog from "@/components/layout/AuthDialog";
import useAuthPopup from "@/stores/useAuthPopup";

export default function Header() {
  const authPopup = useAuthPopup();

  return (
    <header className="sticky top-0 z-50 bg-white/95 backdrop-blur-sm border-b border-gray-100">
      <div className="w-full max-w-6xl mx-auto">
        <div className="flex justify-between items-center px-4 sm:px-6 lg:px-8 py-4">
          {/* Логотип */}
          <Link href="/" className="flex-shrink-0">
            <Image
              src="/images/logo.svg"
              alt="Marine Travel"
              width={150}
              height={45}
              className="h-10 w-auto"
            />
          </Link>

          {/* Контакты и кнопка */}
          <div className="flex items-center space-x-4">
            {/* Номер телефона - скрыт на маленьких экранах */}
            <div className="hidden sm:flex items-center space-x-2 text-gray-700">
              <span className="text-sm sm:text-base">+7 (978) 744-89-00</span>
            </div>

            {/* Кнопка мобильного меню */}
            <Button
              variant="ghost"
              size="icon"
              onClick={authPopup.open}
              className="text-gray-700 w-[100px] h-[48px] border"
            >
              <Menu className="!h-[24px] !w-[24px]" />

              <User className="!h-[24px] !w-[24px] text-brand" />
            </Button>
          </div>
        </div>
      </div>

      {/* Диалог авторизации */}
      <AuthDialog isOpen={authPopup.opened} onClose={authPopup.close} />
    </header>
  );
}
