"use client";

import { useRef } from "react";

export default function ScrollableTable({ children }: { children: React.ReactNode }) {
  const ref = useRef<HTMLDivElement>(null);

  function scroll(direction: number) {
    ref.current?.scrollBy({ left: direction * 320, behavior: "smooth" });
  }

  return (
    <div>
      <div className="mb-2 flex items-center justify-end gap-2">
        <span className="text-xs text-stone-400">Scroll table:</span>
        <button
          onClick={() => scroll(-1)}
          className="rounded border border-rose-200 px-3 py-1 text-xs font-medium text-rose-700 hover:bg-rose-50"
          aria-label="Scroll table left"
        >
          ← Left
        </button>
        <button
          onClick={() => scroll(1)}
          className="rounded border border-rose-200 px-3 py-1 text-xs font-medium text-rose-700 hover:bg-rose-50"
          aria-label="Scroll table right"
        >
          Right →
        </button>
      </div>
      <div ref={ref} className="max-h-[75vh] overflow-auto rounded-lg border border-rose-100 bg-white">
        {children}
      </div>
    </div>
  );
}