"use client"
import { Select } 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 VtCurrencySelect({
  nodes,
  context,
}: {
  nodes: LayoutComponentDefinition
  context: LayoutContext
}) {
  const props = nodes.config ?? {}
  if (!props.trigger.text || props.items.length === 0) {
    return null
  }
  return (
    <Select>
      <Select.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 />}
      </Select.Trigger>
      <Select.Content>
        {props.items.length > 0 &&
          props.items.map(
            (
              item: {
                text: string
                className?: string
                href?: string
                icon?: string
              },
              index: number
            ) => (
              <Select.Item
                value={item.text || ""}
                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
              )}
            </Select.Item>
          )
        )}
      </Select.Content>
    </Select>
  )
}