"use client";

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

export default function Header() {
    const [isMobileMenuOpen, setIsMobileMenuOpen] = 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={() =>
                                setIsMobileMenuOpen(!isMobileMenuOpen)
                            }
                            className="text-gray-700 w-[100px] h-[48px] border"
                        >
                            {isMobileMenuOpen ? (
                                <X className="!h-[24px] !w-[24px]" />
                            ) : (
                                <Menu className="!h-[24px] !w-[24px]" />
                            )}
                            <User className="!h-[24px] !w-[24px] text-brand" />
                        </Button>
                    </div>
                </div>

                {/* Мобильное меню */}
                {/* {isMobileMenuOpen && (
                    <div className="lg:hidden mt-4 pb-4 border-t border-gray-100">
                        <nav className="flex flex-col space-y-4 pt-4">
                            <div className="pt-4 border-t border-gray-100">
                                <div className="flex items-center space-x-2 text-gray-700 mb-4">
                                    <span className="font-semibold">
                                        +7 (123) 456-78-90
                                    </span>
                                </div>
                                <Button className="w-full bg-primary hover:bg-primary/90 text-white">
                                    Заказать звонок
                                </Button>
                            </div>
                        </nav>
                    </div>
                )} */}
            </div>
        </header>
    );
}