"use client";

import { FC, useState } from "react";
import { Button } from "../ui/button";

export function ListCompactor<T>({
  data,
  Component,
}: {
  data: T[];
  Component: FC<{ item: T }>;
}) {
  const [limit, setLimit] = useState(5);

  return (
    <>
      {data.length === 0 && (
        <>
          <h2 className="text-sm text-center pb-2 text-gray-400">Empty List</h2>
          <h3 className="text-xs text-center pb-2 text-gray-400">
            You may be lacking permissions.
          </h3>
        </>
      )}
      {data.slice(0, limit).map((item, index) => (
        <Component key={index} item={item} />
      ))}
      {limit < data.length && (
        <Button
          variant="secondary"
          onClick={() => setLimit((limit) => limit + 5)}
        >
          Show more
        </Button>
      )}
    </>
  );
}