import { useMemo } from "react";

export type MenuProps = {
  items: MenuItem[];
  basename?: string;
};
export type MenuItem = {
  id: string;
  data: {
    title: string;
    tags: string[];
    hideInMenu?: boolean;
  }
}
export const Menu = (props: MenuProps) => {
  const { items, basename = '' } = props;
  const list = useMemo(() => {
    return items.filter(item => !item.data?.hideInMenu);
  }, [items]);
  if (list.length === 0) {
    return null;
  }
  return (
    <nav className='flex-1 overflow-y-auto scrollbar bg-sidebar border border-sidebar-border rounded-lg p-4 shadow-sm'>
      <h2 className="text-sm font-semibold text-sidebar-foreground">列表</h2>
      <div className="space-y-1">
        {list.map(item => (
          <a
            key={item.id}
            href={`${basename}/docs/${item.id}/`}
            className="group block rounded-md hover:bg-sidebar-accent transition-all duration-200 ease-in-out"
          >
            <div className="px-3 py-2.5">
              <h3 className="text-sm font-semibold text-sidebar-foreground group-hover:text-sidebar-accent-foreground transition-colors">
                {item.data?.title}
              </h3>
              {item.data?.tags && item.data.tags.length > 0 && (
                <div className="flex flex-wrap gap-1.5 mt-2">
                  {item.data.tags.map(tag => (
                    <span
                      key={tag}
                      className="text-xs px-2 py-0.5 rounded-full bg-muted/60 text-muted-foreground font-medium hover:bg-muted transition-colors"
                    >
                      {tag}
                    </span>
                  ))}
                </div>
              )}
            </div>
          </a>
        ))}
      </div>
    </nav>
  );
}