"use client"
import {
  LayoutComponentDefinition,
  LayoutContext,
} from "@vibentec/component-map"
import LocalizedClientLink from "@modules/common/components/localized-client-link"
import * as MedusaIcons from "@medusajs/icons"
import * as CustomIcons from "@modules/common/icons"
export default function VtMenuItem({
  nodes,
  context,
}: {
  nodes: LayoutComponentDefinition
  context: LayoutContext
}) {
  const props = nodes.config ?? {}
  const title = props.title ?? ""
  const items = props.items ?? []
  const icon = props.icon ?? ""

  const getIconComponent = (icon: string | undefined) => {
    return icon
      ? (MedusaIcons as Record<string, any>)[icon] ??
        (CustomIcons as Record<string, any>)[icon]
      : undefined
  }
  return (
    <div className={props.className ?? "flex flex-col gap-y-2"}>
      <span>{title}</span>
      <ul className="grid grid-cols-1 gap-2" data-testid="footer-categories">
        {items.map((item: { text: string; href?: string; icon?: string }, index: number) => {
          const Icon = getIconComponent(item.icon)
          return (
            <li
              key={`${item.text}-${index}`}
              className={props.itemClassName ?? "text-ui-fg-subtle txt-small"}
            >
              {Icon && <Icon className={props.iconClassName ?? "inline-block mr-2"} />}
              {item.href ? (
                <LocalizedClientLink
                  className="hover:text-ui-fg-base"
                  href={item.href}
                  data-testid="category-link"
                >
                  {item.text}
                </LocalizedClientLink>
              ) : (
                <span className="hover:text-ui-fg-base">{item.text}</span>
              )}
            </li>
          )
        })}
      </ul>
    </div>
  )
}