import React from "react";
import { FaUser } from "react-icons/fa6";

const UserLayout = ({
    children,
    showBack = false,
    title,
    showNavbar = true,
    bg = "bg.png",
}) => {
    return (
        <div className=" w-full relative min-h-[100dvh] flex flex-col bg-gray-100">
            <img
                className="w-screen h-screen object-cover pointer-events-none opacity-30 fixed z-10"
                src={`/assets/images/${bg}`}
                alt=""
            />
            <img
                className="fixed pointer-events-none z-20 top-24 -left-32 w-96 object-cover"
                src="/assets/images/overlay1.png"
                alt=""
            />
            <img
                className="fixed pointer-events-none z-20 bottom-8 -right-20 w-96 object-cover"
                src="/assets/images/overlay2.png"
                alt=""
            />
            <HeaderLayout showBack={showBack} title={title} />
            <div className="z-30">
                <div className="md:max-w-[800px] w-full mx-auto pb-20 px-6 md:px-4 pt-24 md:pt-28 md:pb-0">
                    {children}
                </div>
            </div>
            {/* {showNavbar && <NavbarLayout />} */}
        </div>
    );
};

const HeaderLayout = ({ showBack = false, title = "Rumah Baca Kita" }) => {
    return (
        <div className="w-full flex items-center py-4 px-6 md:px-4 bg-[#6164E2] fixed top-0 left-0 z-[300]">
            <div className="md:max-w-[800px] w-full mx-auto flex items-center">
                <div
                    onClick={() => history.back()}
                    className="flex items-center flex-1"
                >
                    <img
                        className=" h-16 pr-4"
                        src="/assets/images/logo.png"
                        alt=""
                    />
                    {/* Icons back */}
                    {/* {showBack && (
                        <div className="text-white text-lg px-3">
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                className="h-5 w-5"
                                fill="none"
                                viewBox="0 0 24 24"
                                stroke="currentColor"
                            >
                                <path
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    strokeWidth="2"
                                    d="M10 19l-7-7m0 0l7-7m-7 7h18"
                                />
                            </svg>
                        </div>
                    )} */}
                    <div className="text-white text-lg">{title}</div>
                </div>
                <div>
                    <div className="dropdown dropdown-end">
                        <div
                            tabIndex={0}
                            role="button"
                            className="btn btn-ghost btn-circle avatar"
                        >
                            <div className="w-10 rounded-full">
                                <img
                                    alt="Tailwind CSS Navbar component"
                                    src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg"
                                />
                            </div>
                        </div>
                        <ul
                            tabIndex={0}
                            className="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52"
                        >
                            <li>
                                <a href="/logout">Logout</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    );
};

const NavbarLayout = () => {
    return (
        <div className="w-full flex md:hidden items-center py-4 px-3 bg-gray-800 fixed bottom-0 left-0">
            <div className="btm-nav">
                <button className="active">
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        className="h-5 w-5"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                    >
                        <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth="2"
                            d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
                        />
                    </svg>
                    <span className="btm-nav-label">Home</span>
                </button>
                <button>
                    <FaUser />
                    <span className="btm-nav-label">Profile</span>
                </button>
            </div>
        </div>
    );
};

export default UserLayout;