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 (
    <>
      {props?.icon && (
        <IconButton className={props?.className ?? ""}>
          {IconComponent && (
            <IconComponent className={props?.iconClassName ?? ""} />
          )}
          {props?.label && (
            <span className={props?.labelClassName ?? ""}>{props.label}</span>
          )}
        </IconButton>
      )}
      {!props?.icon && (
        <Button className={props?.className ?? ""}>
          {props?.label && <span>{props.label}</span>}
        </Button>
      )}
    </>
  )
}