"use client";

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

export default function Header() {
    const [isAuthDialogOpen, setIsAuthDialogOpen] = useState(false);

    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={() => setIsAuthDialogOpen(true)}
                            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={isAuthDialogOpen}
                onClose={() => setIsAuthDialogOpen(false)}
            />
        </header>
    );
}