import { useScrollEdge } from './useScrollEdge'

// ChromeStrip is the row of document pills (tone, history, export) on a screen
// too narrow to hold them. It scrolls within itself rather than letting the
// overflow escape into the editor pane, and it says which way the rest of the
// row is.
//
// Saying so matters more here than in most scrollers: the pills are the only
// way to reach three features, and a pill that has scrolled out of sight is
// indistinguishable from a pill that doesn't exist. So each edge with more
// behind it fades — the same "there is more this way" language .petal-toolbar
// speaks with its clipped right edge, except this row can be scrolled from
// either end and has to point in the right direction.
//
// The fade is a mask rather than a gradient overlay so it works on whatever is
// behind it (the cream page, the night theme, a falling petal) without knowing
// the background colour.
//
// The measuring itself lives in useScrollEdge, shared with the formatting
// toolbar — which has to say the same thing for the same reason.

interface Props {
  className?: string
  children: React.ReactNode
}

export function ChromeStrip({ className = '', children }: Props) {
  const { ref, edge } = useScrollEdge<HTMLDivElement>()

  return (
    <div ref={ref} data-edge={edge} className={`petal-chrome-strip ${className}`}>
      {children}
    </div>
  )
}