import { PropsWithChildren, ReactNode } from "react";
import { IUser, PageProps } from "@/types";
import {
    Facebook as FacebookIcon,
    Instagram as InstagramIcon,
} from "@mui/icons-material";
import BirdRight from "@/Components/BabolygoBirdRight";
import BirdLeft from "@/Components/BabolygoBirodLeft";
import ButterflyDivider from "@/Components/ButterflyDivider";
import NavbarUser from "@/Components/NavbarUser";
import NavbarAdmin from "@/Components/NavbarAdmin";
import { usePage } from "@inertiajs/react";
import Alert from "@/Components/Alert";

export default function Authenticated({
    user,
    header,
    children,
    processing,
}: PropsWithChildren<{
    user: IUser;
    header?: ReactNode;
    processing?: boolean;
}>) {
    const footerData = [
        {
            title: "Babolygó Nevelési Központ",
            text: "1124 Budapest, Tamási Áron u. 41.",
        },
        {
            title: "Nyitva tartás",
            text: "Hétfőtől péntekig: 7.30 – 17.30",
        },
        {
            title: "Teleofon",
            text: "+36 20 527 1980",
        },
        {
            title: "Email",
            text: "babolygo@babolygo.com",
        },
    ];

    const { flash } = usePage<PageProps>().props;
    return (
        <div>
            <div className=" bg-blue-200">
                {processing && (
                    <div className="fixed inset-0 bg-white bg-opacity-75 flex items-center justify-center z-60">
                        <div className="w-16 h-16 border-4 border-blue-500 border-solid border-t-transparent rounded-full animate-spin"></div>
                    </div>
                )}
                <div className="min-h-screen flex flex-col">
                    {user.is_admin ? (
                        <NavbarAdmin user={user} />
                    ) : (
                        <NavbarUser user={user} />
                    )}

                    {/* Header/main section */}
                    {header && (
                        <header className="">
                            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 ">
                                <h1 className=" font-semibold text-3xl text-babolygo-pink leading-tight mt-3">
                                    {header}
                                </h1>
                                <div className="flex mb-3">
                                    <ButterflyDivider />
                                </div>
                            </div>
                        </header>
                    )}

                    <div className="py-12">
                        <Alert flash={flash} />
                        <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
                            <main>
                                <div className="container">{children}</div>
                            </main>
                        </div>
                    </div>
                    {/* Footer section */}
                    <footer className="mt-auto ">
                        <div className="text-babolygo-pink max-w-7xl mx-auto px-4 sm:px-6 lg:px-8  ">
                            <div className="bg-footer-divider bg-no-repeat bg-center h-44">
                                <div className="flex items-center justify-center h-full">
                                    <ul className="inline-flex space-x-4">
                                        <li className="flex">
                                            <a
                                                href="https://www.facebook.com/babolygomaganovoda"
                                                target="_blank"
                                            >
                                                <FacebookIcon fontSize="large" />
                                            </a>
                                        </li>
                                        <li className="flex">
                                            <a
                                                href="https://www.instagram.com/babolygo_ovoda/"
                                                target="_blank"
                                            >
                                                <InstagramIcon fontSize="large" />
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <div className="relative">
                                <BirdLeft />
                                <div className="absolute top-0 right-0">
                                    <BirdRight />
                                </div>
                            </div>

                            <div className="flex flex-wrap justify-center p-3">
                                {footerData.map((section, index) => (
                                    <div
                                        key={index}
                                        className="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 mb-6 px-4 text-center"
                                    >
                                        <h1 className="text-lg font-bold">
                                            {section.title}
                                        </h1>
                                        <a className="mb-2">{section.text}</a>
                                    </div>
                                ))}
                                <div className=""></div>
                            </div>

                            <div className="col-md-12">
                                <ul className="pull-right list-unstyled text-center p-3 font-bold">
                                    <li>
                                        © Babolygo {new Date().getFullYear()}
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </footer>
                </div>
            </div>
        </div>
    );
}