import { listNav } from "@/constans";
import { Button } from "@mui/material";
import Image from "next/image";
import Link from "next/link";

function Header() {
    return (
        <div
            className="bg-[#FAFAFA] rounded-lg shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-full mx-auto"
        >
            <div className="h-20 px-4 py-8 flex overflow-hidden justify-between items-center flex-nowrap">
                <div className="flex items-center justify-start gap-[5px]">
                    <Image
                        src='/assets/images/logo.png'
                        width={30}
                        height={30}
                        alt="logo"
                    />
                    <p className="text-[#526CAC] text-[16px] font-bold font-kalame">نوبت ۷۲۴</p>
                </div>
                <ul className="flex items-center justify-center gap-10">
                    {listNav.map(nav => (
                        <li
                            key={nav.id}
                        >
                            <Link
                                href={nav.link}
                                className={`
                                ${nav.id === 1 ? 'text-[#526CAC]' : 'text-[#525252]'}
                                text-[16px] font-medium
                            `}
                            >
                                {nav.name}
                            </Link>
                        </li>
                    ))}
                </ul>
                <Link href='/signin'>
                    <Button variant="outlined" color="primary">
                        ورود | ثبت نام
                    </Button>
                </Link>
            </div>
        </div>
    )
}

export default Header