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

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

  return (
    <nav className="content-container txt-xsmall-plus flex items-center justify-between w-full h-full text-small-regular">
      <div className="flex items-center gap-x-4 w-full h-full">
        {props.left && <DynamicLayoutRenderer nodes={props.left} context={context} />}
      </div>
      <div className="flex items-center gap-x-4 w-full h-full">
        {props.center && <DynamicLayoutRenderer nodes={props.center} context={context} />}
      </div>
      <div className="flex items-center gap-x-4 w-full h-full justify-end">
        {props.right && <DynamicLayoutRenderer nodes={props.right} context={context} />}
      </div>
    </nav>
  )
}