import {
  LayoutComponentDefinition,
  LayoutContext,
} from "vibentec/component-map"
import { clx } from "@medusajs/ui"
import BannerNav from "./banner-nav"
import BannerCTA from "./banner-cta"
import BannerTicker from "./banner-ticker"

interface BannerProps {
  variant: "nav" | "cta" | "ticker"
  className?: string
  speed?: number
}
export default async function Banner({
  nodes,
  context,
}: {
  nodes: LayoutComponentDefinition
  context: LayoutContext
}) {
  const props = (nodes.config as BannerProps) ?? {}
  const bannerClassName = clx(
    "relative h-8 mx-auto border-b duration-200 bg-white border-ui-border-base",
    props.className
  )
  if (!props.variant) return null

  const variants = {
    nav: BannerNav,
    cta: BannerCTA,
    ticker: BannerTicker,
  }

  const Component = variants[props.variant]

  return (
    <div className={bannerClassName}>
      <Component node={nodes} context={context} />
    </div>
  )
}