import React from 'react';
import Link from 'next/link';
import { NavigationMenuLink } from "@/components/ui/navigation-menu";
import { cn } from "@/lib/utils";
import * as LucideIcons from "lucide-react";
import { MenuItem } from '@/config/menuConfig';

type GroupedMenuItems = {
  [key: string]: MenuItem[];
};

interface GroupedMenuRendererProps {
  items: MenuItem[];
  lng: string;
}

const GroupedMenuRenderer = ({ items, lng }: GroupedMenuRendererProps) => {
  // 그룹별로 아이템 분류
  const groupItems = (items: MenuItem[]): GroupedMenuItems => {
    return items.reduce((groups, item) => {
      const group = item.group || 'default';
      if (!groups[group]) {
        groups[group] = [];
      }
      groups[group].push(item);
      return groups;
    }, {} as GroupedMenuItems);
  };

  const groupedItems = groupItems(items);
  const groups = Object.keys(groupedItems);

  return (
    <div className="p-4 w-[600px]">
      {groups.map((groupName, index) => (
        <div key={groupName} className={cn("mb-4", index < groups.length - 1 && "pb-2 border-b border-border/30")}>
          {groupName !== 'default' && (
            <h3 className="text-sm font-semibold mb-2 text-primary">{groupName}</h3>
          )}
          <div className="grid grid-cols-2 gap-3">
            {groupedItems[groupName].map((item) => (
              <MenuListItem key={item.title} item={item} lng={lng} />
            ))}
          </div>
        </div>
      ))}
    </div>
  );
};

const MenuListItem = ({ item, lng }: { item: MenuItem; lng: string }) => {

  
 
  
  return (
    <NavigationMenuLink asChild>
      <Link
        href={`/${lng}${item.href}`}
        className={cn(
          "flex items-start space-x-2 rounded-md p-3 leading-none no-underline outline-none transition-colors",
          "hover:bg-accent hover:text-accent-foreground",
          "focus:bg-accent focus:text-accent-foreground",
          item.disabled && "pointer-events-none opacity-60"
        )}
      >
        <div className="space-y-1">
          <div className="text-sm font-medium leading-none">{item.title}</div>
          {item.description && (
            <p className="line-clamp-2 text-xs leading-snug text-muted-foreground">
              {item.description}
            </p>
          )}
        </div>
      </Link>
    </NavigationMenuLink>
  );
};

export default GroupedMenuRenderer;