"use client"
import { DropdownMenu } from "@medusajs/ui"
import LocalizedClientLink from "@modules/common/components/localized-client-link"
import ChevronDown from "@modules/common/icons/chevron-down"
import {
  LayoutComponentDefinition,
  LayoutContext,
} from "@vibentec/component-map"

export default function VtDropdown({
  nodes,
  context,
}: {
  nodes: LayoutComponentDefinition
  context: LayoutContext
}) {
  const props = nodes.config ?? {}
  if (!props.trigger.text || props.items.length === 0) {
    return null
  }
  return (
    <DropdownMenu>
      <DropdownMenu.Trigger
        className={props.trigger.className + " flex items-center gap-1"}
      >
        {props.trigger.icon && (
          <img
            src={props.trigger.icon}
            alt={props.trigger.text}
            className="w-5 h-5 rounded-[50%] mr-3"
          />
        )}
        {props.trigger.text} {props.trigger.isShowArrow && <ChevronDown />}
      </DropdownMenu.Trigger>
      <DropdownMenu.Content>
        {props.items.map(
          (
            item: {
              text: string
              className?: string
              href?: string
              icon?: string
            },
            index: number
          ) => (
            <DropdownMenu.Item
              key={item.text + index}
              className={item.className || ""}
            >
              {item.icon && (
                <img
                  src={item.icon}
                  alt={item.text}
                  className="w-5 h-5 rounded-[50%] mr-3"
                />
              )}
              {item.href ? (
                <LocalizedClientLink href={item.href}>
                  {item.text}
                </LocalizedClientLink>
              ) : (
                item.text
              )}
            </DropdownMenu.Item>
          )
        )}
      </DropdownMenu.Content>
    </DropdownMenu>
  )
}