'use client';

import { usePathname } from 'next/navigation';
import { SidebarLinks } from './Links';
import { adminRoutes, userRoutes } from './routes';

export function Sidebar({
  open,
  onClose,
}: {
  open: boolean;
  onClose: () => void;
}) {
  const pathname = usePathname();
  const routes = pathname?.startsWith('/admin') ? adminRoutes : userRoutes;

  return (
    <div
      className={`sm:none duration-175 linear fixed !z-50 flex min-h-full w-[260px] flex-col bg-white pb-10 shadow-2xl shadow-white/5 transition-all dark:!bg-navy-800 dark:text-white md:!z-50 lg:!z-50 xl:!z-0 xl:!translate-x-0 ${
        open ? 'translate-x-0' : '-translate-x-96'
      }`}
    >
      <span
        className="absolute top-4 right-4 block cursor-pointer xl:hidden"
        onClick={onClose}
      >
        ✕
      </span>
      <div className="mx-[56px] mt-[50px] flex items-center">
        <div className="mt-1 ml-1 h-2.5 font-poppins text-[26px] font-bold uppercase text-navy-700 dark:text-white">
          SEO Audit
        </div>
      </div>
      <div className="mt-[58px] mb-7 h-px bg-gray-300 dark:bg-white/30" />
      <SidebarLinks routes={routes} />
    </div>
  );
}