import { clx } from "@medusajs/ui"
import {
  LayoutComponentDefinition,
  LayoutContext,
} from "@vibentec/component-map"
import Image from "next/image"

export interface VtImageConfig {
  src: string
  alt: string
  className?: string,
  objectFit?: string,
}
export default function VtImage({
  nodes,
  context,
}: {
  nodes: LayoutComponentDefinition
  context: LayoutContext
}) {
  const props = (nodes.config as VtImageConfig) ?? {}
  return (
    <div className={clx("relative", props.className)}>
      <Image src={props.src} alt={props.alt} fill objectFit={props.objectFit ?? "contain"} />
    </div>
  )
}