import {Clock} from "lucide-react";
import dayjs from 'dayjs'

type PageHeaderPropsType = {
    header: string;
}

export default function PageHeader(props: PageHeaderPropsType) {
    const dateToday = dayjs().format("MMM D, YYYY")
    return (
        <header className="w-full border-b sticky z-[50] top-0 backdrop-blur-xl">
            <div className="flex h-16 items-center justify-between container-auto">
                <h1 className={"text-xl md:text-2xl font-black text-gray-600"}>{props.header}</h1>
                <div className={"flex gap-2 text-gray-700 font-black"}>
                    <Clock size={18}/>
                    <p className={"text-sm"}>{dateToday}</p>
                </div>
            </div>
        </header>
    )
}