import styles from "./banner-ticker.module.css"
import { DynamicLayoutRenderer } from "vibentec/renderer"
import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map"

interface BannerTickerProps {
  node: LayoutComponentDefinition
  context: LayoutContext
}
interface BannerConfigProps {
  items?: LayoutComponentDefinition[]
  speed?: number
}
export default function BannerTicker({ node, context }: BannerTickerProps) {
  const props = node.config as BannerConfigProps ?? {}
  const speed = props.speed ?? 10;
  return (
    <div className="relative overflow-hidden w-full h-full">
      <div className={styles.ticker}   style={{ animationDuration: `${speed}s` }} >
        <DynamicLayoutRenderer nodes={props.items ?? []} context={context} />
      </div>
    </div>
  )
}