import { IconBook2, IconHome, IconSettings } from "@tabler/icons-react";

export default function EditLayout({
    children,
}: {
    children: React.ReactNode;
}) {
    return (
        <div className="drawer lg:drawer-open">
            <input id="my-drawer-4" type="checkbox" className="drawer-toggle" />
            <div className="drawer-content h-screen grid grid-rows-[min-content_1fr]">
                {/* Navbar */}
                <nav className="navbar w-full bg-base-300">
                    <label htmlFor="my-drawer-4" aria-label="open sidebar" className="btn btn-square btn-ghost">
                        {/* Sidebar toggle icon */}
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" strokeLinejoin="round" strokeLinecap="round" strokeWidth="2" fill="none" stroke="currentColor" className="my-1.5 inline-block size-4"><path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path><path d="M9 4v16"></path><path d="M14 10l2 2l-2 2"></path></svg>
                    </label>
                    <div id="editor-navbar-title" className="px-4">
                        {/* Editor Navbar title goes here */}
                    </div>
                    <div id="editor-navbar" className="ml-auto flex space-x-2">
                        {/* Editor Navbar items go here */}
                    </div>
                </nav>
                {/* Page content here */}
                <div className="overflow-auto max-h-full">
                    {children}
                </div>
            </div>

            <div className="drawer-side is-drawer-close:overflow-visible">
                <label htmlFor="my-drawer-4" aria-label="close sidebar" className="drawer-overlay"></label>
                <div className="flex min-h-full flex-col items-start bg-base-200 is-drawer-close:w-14 is-drawer-open:w-64">
                    {/* Sidebar content here */}
                    <ul className="menu w-full grow border-r border-r-gray-300">
                        {/* List item */}
                        <li>
                            <a
                                role="button"
                                href="/admin"
                                className="is-drawer-close:tooltip is-drawer-close:tooltip-right" data-tip="Главная">
                                {/* Home icon */}
                                <IconHome className="my-1.5 inline-block size-4" size={16} />
                                <span className="is-drawer-close:hidden">Главная</span>
                            </a>
                        </li>

                        <li>
                            <a
                                role="button"
                                href="/admin/posts"
                                className="is-drawer-close:tooltip is-drawer-close:tooltip-right" data-tip="Записи">
                                <IconBook2 className="my-1.5 inline-block size-4" size={16} />
                                <span className="is-drawer-close:hidden">Записи</span>
                            </a>
                        </li>

                        {/* List item */}
                        <li>
                            <button className="is-drawer-close:tooltip is-drawer-close:tooltip-right" data-tip="Настройки">
                                <IconSettings className="my-1.5 inline-block size-4" size={16} />
                                <span className="is-drawer-close:hidden">Настройки</span>
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    )
}