import React from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { IoIosArrowDown } from "react-icons/io";

export default function Header({ className = "" }) {
    return (
        <>
            <header className={`flex justify-between items-center sticky top-0 left-0 right-0 px-4 md:px-8 lg:px-16 z-50 bg-white-500 shadow-md h-16 md:h-20 transition-all ${className}`}>
                {/* لوگو و منوی دراپ داون */}
                <div className="flex justify-center items-center gap-4 md:gap-8 shrink-0">
                    <Image
                        src="/KafehJoo.svg"
                        alt="KafehJoo Logo Default"
                        width={50}
                        height={45}
                        className="hover:scale-110 transition-transform" />
                    <div className="hidden md:block relative">
                        <select className="h-9 md:h-10 w-24 pr-2 bg-white border-2 border-primary-300 rounded-lg appearance-none text-sm cursor-pointer hover:border-primary-500 focus:border-primary-500 focus:outline-none transition-colors">
                            <option value="شهر">شهر</option>
                            <option value="کشور">کشور</option>
                            <option value="استان">استان</option>
                        </select>
                        <IoIosArrowDown className="absolute left-2 top-1/2 transform -translate-y-1/2 text-primary-500 pointer-events-none" />
                    </div>
                </div>
                {/* لیست آیتم‌ها */}
                <nav aria-label="main menu" className="hidden lg:flex items-center justify-between px-4 py-2">
                    <div className="flex items-center gap-8 text-black-500 font-semibold text-sm lg:text-base">
                        <Link href="/" className="hover:text-primary-500 transition-colors pb-1 border-b-2 border-transparent hover:border-primary-500">خانه</Link>
                        <Link href="/categories" className="hover:text-primary-500 transition-colors pb-1 border-b-2 border-transparent hover:border-primary-500">دسته‌بندی</Link>
                        <Link href="/contact_us" className="hover:text-primary-500 transition-colors pb-1 border-b-2 border-transparent hover:border-primary-500">تماس با ما</Link>
                        <Link href="/about_us" className="hover:text-primary-500 transition-colors pb-1 border-b-2 border-transparent hover:border-primary-500">درباره ما</Link>
                    </div>
                </nav>
                {/* دکمه ثبت نام */}
                <Link href="/register"
                    className="flex justify-center items-center text-xs md:text-sm
                    font-bold h-9 md:h-10 px-4 md:px-6 text-white-100 bg-primary-500
                    hover:bg-primary-600 rounded-lg md:rounded-xl transition-all hover:shadow-lg
                    hover:-translate-y-0.5 active:translate-y-0 active:shadow-none shrink-0">
                    ثبت نام
                </Link>
            </header>
        </>
    )
}