Marquee

export const MarqueeStyle = forSlots(MarqueeSlots)(Recipes.Marquee({}))

const CUSTOMERS = ['Acme', 'Globex', 'Initech', 'Umbrella', 'Hooli', 'Stark']

/** What it measured and whether it is paused are the marquee's Model, folded with `Marquee.update`. */
export const marquee = <Message>(
  style: NamedStyle<typeof MarqueeSlots>,
  model: Marquee.Model,
  onMessage: (message: Marquee.Message) => Message,
  h: HtmlBuilder<Message>,
): Html =>
  Marquee.view(
    {
      model,
      onMessage,
      label: 'Our customers',
      items: CUSTOMERS.map(name => h.strong([], [name])),
      speed: 40,
      style,
    },
    h,
  )

export const marqueeVertical = <Message>(
  style: NamedStyle<typeof MarqueeSlots>,
  model: Marquee.Model,
  onMessage: (message: Marquee.Message) => Message,
  h: HtmlBuilder<Message>,
): Html =>
  h.div(
    [h.Style({ blockSize: '6rem' })],
    [
      Marquee.view(
        {
          model,
          onMessage,
          label: 'Latest news',
          items: ['Release 1.2 is out', 'New docs site', 'Meetup on Friday'].map(line =>
            h.span([], [line]),
          ),
          side: 'top',
          speed: 20,
          style,
        },
        h,
      ),
    ],
  )