import LocalizedClientLink from "@modules/common/components/localized-client-link"
import {
  LayoutComponentDefinition,
  LayoutContext,
} from "vibentec/component-map"
import { clx } from "@medusajs/ui"
import * as MedusaIcons from "@medusajs/icons"
export const AccountButton = ({
  nodes,
  context,
}: {
  nodes: LayoutComponentDefinition
  context: LayoutContext
}) => {
  const props = nodes.config ?? {}
  const className = clx("hover:text-ui-fg-base", props.className)
  const style: React.CSSProperties = {}
  if (props.bgColor) style.backgroundColor = props.bgColor
  if (props.textColor) style.color = props.textColor
  const href = props.href ?? "/account"
  const label = props.label ?? "Account"
  const iconName = props.icon
  const Icon = iconName
    ? (MedusaIcons as Record<string, React.ComponentType<any>>)[iconName]
    : undefined
  return (
    <div className="flex items-center h-full">
      <LocalizedClientLink
        href={href}
        className={className}
        data-testid="nav-account-link"
      >
        {Icon ? <Icon /> : label}
      </LocalizedClientLink>
    </div>
  )
}

export default AccountButton