import { Button, IconButton } from "@medusajs/ui"
import * as MedusaIcons from "@medusajs/icons"
import * as CustomIcons from "@modules/common/icons"
import {
  LayoutComponentDefinition,
  LayoutContext,
} from "@vibentec/component-map"

export default function VtButton({
  nodes,
  context,
}: {
  nodes: LayoutComponentDefinition
  context: LayoutContext
}) {
  const props = nodes.config || {}
  const iconName = props.icon as string | undefined
  const IconComponent = iconName
    ? (MedusaIcons as Record<string, any>)[iconName] ??
      (CustomIcons as Record<string, any>)[iconName]
    : undefined
  return (
    <IconButton className={props?.className ?? ""}>
      {IconComponent && (
        <IconComponent className={props?.iconClassName ?? ""} />
      )}
      {props?.label && (
        <span className={props?.labelClassName ?? ""}>{props.label}</span>
      )}
    </IconButton>
  )
}
