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

export default function VtHeader({ nodes, context }: { nodes: LayoutComponentDefinition; context: LayoutContext }) {
  const { sticky = true } = nodes.config ?? {};
  const cName = clx(sticky && "sticky top-0","inset-x-0 z-50 group");

  return (
    <header className={cName}>
     { nodes.children &&  <DynamicLayoutRenderer nodes={nodes.children} context={context} /> }
    </header>
  )
}