import { Avatar, Skeleton } from "antd";
import Image from "next/image"
import { useRouter } from "next/router";
import { signOut } from "next-auth/react";
import { UserOutlined } from '@ant-design/icons';
import { ToastContainer } from "react-toastify";
export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, adminName, adminEmail, isRoute }) => {
    const router = useRouter();
    const VenderDetails = () => {
        return <div>
            {!venderBusiness && !venderEmail ?
                <div className="d-flex align-items-center gap-2">
                    <Skeleton.Image active style={{ height: 50, width: 70 }} />
                    <Skeleton.Button active style={{ height: 40, width: 190 }} shape={"rounded"} />
                </div>
                :
                <div className="d-flex align-items-center gap-3">
                    <Image src={businessLogo} height={50} width={70} objectFit="contain" />
                    <div className="d-flex flex-column">
                        <p className="m-0">{venderBusiness}</p>
                        <p className="m-0">{venderEmail}</p>
                    </div>
                </div>
            }
        </div>
    }
    const AdminDetails = () => {
        return <div>
            {!adminName && !adminEmail ?
                <div className="d-flex align-items-center gap-2">
                    <Skeleton.Avatar active size={40} />
                    <Skeleton.Button active style={{ height: 40, width: 190 }} shape={"rounded"} />
                </div>
                :
                <div className="d-flex align-items-center gap-3">
                    <Avatar icon={<UserOutlined />} active size={40} />
                    <div className="d-flex flex-column">
                        <p className="m-0">{adminName}</p>
                        <p className="m-0">{adminEmail}</p>
                    </div>
                </div>
            }
        </div>
    }
    return (
        <div
            className="bg-light px-5 d-flex align-items-center justify-content-between w-100"
            style={{
                height: 80,
                boxshadow: '0px 1px 9px -3px rgba(0,0,0,0.56)',
                '-webkit-box-shadow': '0px 1px 9px -3px rgba(0,0,0,0.56)',
                '-moz-box-shadow': '0px 4px 1px -3px rgba(0,0,0,0.56)'
            }}
        >

            <Image loading="lazy" objectFit="contain" height={50} width={100} alt="" className="" src="/images/main-logo.svg" />
            <div className="d-flex align-items-center gap-5">
                {isRoute === 'vendor' && <VenderDetails />}
                {isRoute === 'admin' && <AdminDetails />}
                <button
                    className="btn btn-primary rounded-pill"
                    style={{ height: 40 }}
                    onClick={async () => {
                        signOut({ redirect: false });
                        await router.push("/");
                        window.location.reload();
                    }}
                >
                    Logout
                </button>
            </div>
        </div>
    )
}