"use client";
// Adapted from Magic UI (MIT). See THIRD_PARTY_NOTICES.md.
import { type ComponentProps, useState } from "react";
export interface MarqueeProps extends ComponentProps<"div"> {
  vertical?: boolean;
  reverse?: boolean;
  paused?: boolean;
  /** Show an accessible pause control. Keep it when content moves automatically. */
  controls?: boolean;
}
export function Marquee({
  children,
  className = "",
  vertical = false,
  reverse = false,
  paused = false,
  controls = true,
  ...props
}: MarqueeProps) {
  const [stopped, setStopped] = useState(false);
  return (
    <div
      {...props}
      className={`ynr-marquee ${className}`}
      data-vertical={vertical}
      data-reverse={reverse}
      data-paused={paused || stopped}
    >
      <div className="ynr-marquee-window">
        <div className="ynr-marquee-track">{children}</div>
        <div
          className="ynr-marquee-track ynr-marquee-copy"
          aria-hidden="true"
          inert
        >
          {children}
        </div>
      </div>
      {controls && (
        <button
          type="button"
          className="ynr-marquee-control"
          onClick={() => setStopped(!stopped)}
          disabled={paused}
          aria-pressed={paused || stopped}
        >
          {paused || stopped ? "Resume scrolling" : "Pause scrolling"}
        </button>
      )}
    </div>
  );
}