import { ChevronRight } from "lucide-react";

import Menu from "../../public/menu.svg?react";
import classes from "./Sidebar.module.css";

export default function Sidebar({ id, menu, right, children }) {
  const aside = (
    <aside
      className={`${classes.sidebar} bg-white dark:bg-gray-800 dark:text-gray-300`}
    >
      <nav>{children}</nav>
    </aside>
  );

  if (!menu) return aside;

  return (
    <div
      className={`${classes.root} ${right ? classes.right : ""} fixed top-12 h-12 w-full flex lg:sticky lg:w-auto lg:top-16 lg:h-full bg-white dark:bg-zinc-900 border-b dark:border-slate-900 lg:!bg-transparent before:bg-white before:dark:bg-zinc-900`}
    >
      <input type="checkbox" id={id} className={classes.toggle} />
      {aside}
      <div className={classes.backdrop}></div>
      <div className={classes.label}>
        <label htmlFor={id}>
          {!right && <Menu className={classes.menu} />}
          {menu}
          {right && <ChevronRight className={classes.arrow} />}
        </label>
      </div>
    </div>
  );
}