import Logo from "@/app/component/Logo";
import { listNav } from "@/constans";
import { Button } from "@mui/material";
import Link from "next/link";

function Header({ name }) {
    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">
                <Logo />
                <ul className="flex items-center justify-center gap-10">
                    {listNav.map(nav => (
                        <li
                            key={nav.id}
                        >
                            <Link
                                href={nav.link}
                                className={`
                                ${nav.link.replace('/', '') === name ? '!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