"use client";

import { useState, type ReactNode } from "react";

export function ShowMore({

  items,

  pageSize = 50,

  controlWrapper = "div",

  noun = "more",

}: {

  items: ReactNode[];

  pageSize?: number;

  controlWrapper?: "div" | "li";

  noun?: string;

}) {

  const [shown, setShown] = useState(pageSize);

  const visible = items.slice(0, shown);

  const remaining = items.length - shown;

  const control =

    remaining > 0 ? (

      <div className="flex items-center justify-between gap-3 px-4 py-3">

        <span className="label text-ash-2">

          Showing {shown.toLocaleString()} of {items.length.toLocaleString()}

        </span>

        <button

          type="button"

          onClick={() => setShown((n) => n + pageSize)}

          className="focus-ring label inline-flex min-h-[40px] items-center rounded-[3px] border border-line px-3 text-ash underline underline-offset-4 transition-colors hover:border-paper hover:text-paper"

        >

          Show {Math.min(pageSize, remaining).toLocaleString()} {noun}

        </button>

      </div>

    ) : null;

  return (

    <>

      {visible}

      {control

        ? controlWrapper === "li"

          ? <li>{control}</li>

          : control

        : null}

    </>

  );

}