import type { ReactNode } from "react";

type VirtualRowElement = "div" | "li";

export function VirtualRow({
  as = "div",
  measureRef,
  index,
  offset,
  className,
  children,
}: {
  as?: VirtualRowElement;
  measureRef: (el: Element | null) => void;
  index: number;
  offset: number;
  className?: string;
  children: ReactNode;
}) {
  const ref = measureRef as (el: HTMLElement | null) => void;
  const style = { transform: `translateY(${offset}px)` };
  const cls = `absolute left-0 right-0 ${className ?? ""}`;
  if (as === "li") {
    return (
      <li ref={ref} data-index={index} style={style} className={cls}>
        {children}
      </li>
    );
  }
  return (
    <div ref={ref} data-index={index} style={style} className={cls}>
      {children}
    </div>
  );
}