"use client"

import * as React from "react"

import { cn } from "../../lib/utils"

/**
 * `Scrollable` is the replacement for `@wordpress/components`' `__experimentalScrollable` -
 * **5 imports across 5 files**.
 *
 * AN ADAPTER, NOT A RENAME. A bare `overflow-auto` div is not what WordPress renders. `useScrollable`
 * always applies `height: 100%`, and it defaults `scrollDirection` to `'y'`, which also pins
 * `overflow-x: hidden`. One of the five call sites passes no direction at all and would lose both.
 *
 * `scrollDirection` reproduces WP's three cases exactly:
 * y (default) overflow-x hidden, overflow-y auto
 * x overflow-x auto, overflow-y hidden
 * auto overflow-y auto only
 *
 * Four call sites pass an inline `style` with a computed height. Inline style beats a class, so
 * `h-full` here is only the fallback WP also had.
 *
 * WP's webkit scrollbar styling is deliberately NOT reproduced: it read WordPress admin scrollbar
 * colours this build no longer loads, so the native scrollbar is used instead.
 */

export type ScrollableDirection = "x" | "y" | "auto"

export interface ScrollableProps extends React.ComponentProps<"div"> {
  scrollDirection?: ScrollableDirection
  smoothScroll?: boolean
}

const DIRECTION_CLASS: Record<ScrollableDirection, string> = {
  x: "overflow-x-auto overflow-y-hidden",
  y: "overflow-x-hidden overflow-y-auto",
  auto: "overflow-y-auto",
}

function Scrollable({
  scrollDirection = "y",
  smoothScroll = false,
  className,
  ...props
}: ScrollableProps) {
  return (
    <div
      data-slot="scrollable"
      className={cn(
        "h-full",
        DIRECTION_CLASS[scrollDirection],
        smoothScroll && "scroll-smooth",
        className
      )}
      {...props}
    />
  )
}

export { Scrollable }