import { ScrollArea } from '@/src/components/ui/scroll-area';
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetTrigger,
} from '@/src/components/ui/sheet';
import { cn } from '@/src/utils/shadcn';
import { MdMenu } from 'react-icons/md';
import { X } from 'lucide-react';

type SubMenuItem = {
  label: string;
  href: string;
};

type NestedSubMenuItem = {
  label: string;
  subMenuItems: SubMenuItem[];
};

type MenuItem = {
  title: string;
  href?: string;
  subMenuItems?: (SubMenuItem | NestedSubMenuItem)[];
};

interface OffCanvasProps {
  menuItems: MenuItem[];
}

export function OffCanvas({ menuItems }: OffCanvasProps) {
  const renderSubMenuItems = (
    subMenuItems: (SubMenuItem | NestedSubMenuItem)[]
  ) => {
    return (
      <ul className="mt-2 space-y-2 pl-4">
        {subMenuItems.map((item, index) => (
          <li key={index}>
            {'href' in item ? (
              <a
                href={item.href}
                className="text-accent-600 block hover:text-primary"
              >
                {item.label}
              </a>
            ) : (
              <div>
                <span className="text-accent-600 block font-bold">
                  {item.label}
                </span>
                {item.subMenuItems && renderSubMenuItems(item.subMenuItems)}
              </div>
            )}
          </li>
        ))}
      </ul>
    );
  };

  return (
    <Sheet>
      <SheetTrigger
        aria-label="Mobile hamburger menu"
        className="text-[2rem] text-primary transition-colors hover:text-primary-light"
      >
        <MdMenu />
      </SheetTrigger>
      <SheetContent
        side="left"
        className="z-444 !max-w-[300px] border-none bg-white p-0"
      >
        <ScrollArea viewportClassName="h-[100vh]" scrollBarClassName="w-0">
          <div className="grid gap-8 p-5">
            {/* Menu Items */}
            <div>
              {menuItems.map((menuItem, index) => (
                <div key={index} className="mb-4">
                  <a
                    href={menuItem.href || '#'}
                    className="block text-lg font-bold text-accent-700 hover:text-primary"
                  >
                    {menuItem.title}
                  </a>
                  {menuItem.subMenuItems &&
                    renderSubMenuItems(menuItem.subMenuItems)}
                </div>
              ))}
            </div>
            {/* Close Button */}
            <SheetClose className="block text-center text-red-500 hover:underline">
              Close Menu
            </SheetClose>
          </div>
        </ScrollArea>
      </SheetContent>
    </Sheet>
  );
}