import {
  LayoutComponentDefinition,
  LayoutContext,
} from "vibentec/component-map"
import { clx } from "@medusajs/ui"
import BannerHero from "./banner-hero"
import { DynamicLayoutRenderer } from "vibentec/renderer"

export default async function Hero({
  nodes,
  context,
}: {
  nodes: LayoutComponentDefinition
  context: LayoutContext
}) {
  const props = nodes.config ?? {}
  const left = nodes.config?.left ?? []
  const center = nodes.config?.center ?? []
  const right = nodes.config?.right ?? []
  const heroClassName = clx(
    "min-h-[30rem] w-full border-b border-ui-border-base relative",
    props.className
  )

  return (
    <div className={heroClassName}>
      <BannerHero node={nodes} context={context} />
      <div className="absolute z-20">
        <nav className="content-container txt-xsmall-plus flex items-center justify-between text-small-regular">
          <div className="flex items-center gap-x-4">
            {left && <DynamicLayoutRenderer nodes={left} context={context} />}
          </div>
          <div className="flex items-center gap-x-4">
            {center && (
              <DynamicLayoutRenderer nodes={center} context={context} />
            )}
          </div>
          <div className="flex items-center gap-x-4 justify-end">
            {right && <DynamicLayoutRenderer nodes={right} context={context} />}
          </div>
        </nav>
      </div>
    </div>
  )
}
