import { Icon } from "components/Ico";
import { cJoin } from "helpers/className";
import { Dispatch, SetStateAction } from "react";
import { Button } from "./Button";

/*
 *                                        ╭─────────────╮
 * ───────────────────────────────────────╯  COMPONENT  ╰───────────────────────────────────────────
 */

interface Props {
  className?: string;
  maxPage: number;
  page: number;
  setPage: Dispatch<SetStateAction<number>>;
}

// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─

export const PageSelector = ({
  page,
  setPage,
  maxPage,
  className,
}: Props): JSX.Element => (
  <div className={cJoin("flex flex-row place-content-center", className)}>
    <Button
      onClick={() => setPage((current) => (page > 0 ? current - 1 : current))}
      className="rounded-r-none"
      icon={Icon.NavigateBefore}
    />
    <Button className="rounded-none border-x-0" text={(page + 1).toString()} />
    <Button
      onClick={() =>
        setPage((current) => (page < maxPage ? page + 1 : current))
      }
      className="rounded-l-none"
      icon={Icon.NavigateNext}
    />
  </div>
);