import { Call, Profile } from "iconsax-react"
import { FC } from "react"
import { useUserStore } from "../../../store/user"

type Props = {
    setShow: () => void
}

export const Header: FC<Props> = ({ setShow }) => {
    const { user } = useUserStore()
    return (
        <header className="flex flex-row w-full justify-between items-center mb-10 lg:mb-[60px]">
            <div className="flex flex-row gap-x-5 lg:gap-x-3 items-center">
                <img src="/svgs/header/burger-menu.svg" alt="burger menu" className="lg:hidden size-[27px]" onClick={setShow} />
                {user?.profilePic !== "noPic" ? <img src={`https://asan-service.com/${user?.profilePic}`} alt="person" className="size-[60px] rounded-full" /> : <div className="size-[60px] flex flex-row justify-center items-center bg-secondary-color rounded-full">
                    <Profile
                        size="30"
                        color="#777577"
                    /></div>}
                <p className="hidden font-normal text-sm lg:block lg:text-xl">{user?.first_name} {user?.last_name}</p>
            </div>
            <div className="flex flex-row gap-x-3 items-center">
                <p className="font-normal text-sm lg:text-xl"><a href={`tel:${user?.mobile_number}`}>{user?.mobile_number}</a></p>
                <Call color="#11212D" variant="Bold" className="size-[27px]" />
            </div>
        </header>
    )
}