import { DynamicLayoutRenderer } from "vibentec/renderer"
import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map";

interface BannerNavProps {
  className?: string;
  left?: LayoutComponentDefinition[];
  center?: LayoutComponentDefinition[];
  right?: LayoutComponentDefinition[];
}
export default function VtNav({ nodes, context }: { nodes: LayoutComponentDefinition; context: LayoutContext }) {
  const props = nodes.config as BannerNavProps ?? {}

  return (
    <div className="relative mx-auto border-b duration-200 bg-white border-ui-border-base">
      <nav className="content-container txt-xsmall-plus text-ui-fg-subtle flex items-center justify-between w-full h-full text-small-regular">
        <div className="flex items-center gap-x-4">
          {props.left && <DynamicLayoutRenderer nodes={props.left} context={context} />}
        </div>
        <div className="flex items-center gap-x-4">
          {props.center && <DynamicLayoutRenderer nodes={props.center} context={context} />}
        </div>
        <div className="flex items-center gap-x-4">
          {props.right && <DynamicLayoutRenderer nodes={props.right} context={context} />}
        </div>
      </nav>
    </div>
  )
}