import LocalizedClientLink from "@modules/common/components/localized-client-link"
import {
  LayoutComponentDefinition,
  LayoutContext,
} from "vibentec/component-map"
import { clx } from "@medusajs/ui"
import { Suspense } from "react"
import CartButton from "@modules/layout/components/cart-button"

export const VtCartButton = ({
  nodes,
  context,
}: {
  nodes: LayoutComponentDefinition
  context: LayoutContext
}) => {
  const props = nodes.config ?? {}
  const className = clx("hover:text-ui-fg-base flex gap-2", props.className)
  return (
    <Suspense
      fallback={
        <LocalizedClientLink
          className={className}
          href="/cart"
          data-testid="nav-cart-link"
        >
          Cart (0)
        </LocalizedClientLink>
      }
    >
      <CartButton iconName={props.icon} />
    </Suspense>
  )
}

export default VtCartButton