import { Pagination as ArkPagination } from '@ark-ui/react/pagination';
import { FC } from 'react';

type PaginationProps = {
  count: number;
  pageSize: number;
  siblingCount: number;
  currentPage: number;
  className?: string;
  onPageChange: (page: number) => void;
};

export const Pagination: FC<PaginationProps> = ({
  count,
  pageSize,
  siblingCount,
  currentPage,
  onPageChange,
}) => {
  return (
    <ArkPagination.Root
      count={count}
      pageSize={pageSize}
      siblingCount={siblingCount}
      onPageChange={(details) => onPageChange(details.page)}
      className="m-2 mx-auto flex items-center gap-1"
    >
      <ArkPagination.PrevTrigger className="border border-gray-300 rounded-md bg-white px-3 py-2 text-sm text-gray-700 font-medium hover:bg-gray-50">
        &lt;&lt;
      </ArkPagination.PrevTrigger>
      <ArkPagination.PrevTrigger className="border border-gray-300 rounded-md bg-white px-3 py-2 text-sm text-gray-700 font-medium hover:bg-gray-50">
        &lt;
      </ArkPagination.PrevTrigger>
      <ArkPagination.Context>
        {(pagination) =>
          pagination.pages.map((page, index) =>
            page.type === 'page' ? (
              <ArkPagination.Item
                key={index}
                {...page}
                className={`px-3 py-2 text-sm font-medium rounded-md ${
                  page.value === currentPage
                    ? 'bg-blue-6 text-white'
                    : 'text-gray-700 bg-white border border-gray-300 hover:bg-gray-50'
                }`}
              >
                {page.value}
              </ArkPagination.Item>
            ) : (
              <ArkPagination.Ellipsis
                key={index}
                index={index}
                className="px-3 py-2 text-sm text-gray-700 font-medium"
              >
                &#8230;
              </ArkPagination.Ellipsis>
            ),
          )
        }
      </ArkPagination.Context>
      <ArkPagination.NextTrigger className="border border-gray-300 rounded-md bg-white px-3 py-2 text-sm text-gray-700 font-medium hover:bg-gray-50">
        &gt;
      </ArkPagination.NextTrigger>
      <ArkPagination.NextTrigger className="border border-gray-300 rounded-md bg-white px-3 py-2 text-sm text-gray-700 font-medium hover:bg-gray-50">
        &gt;&gt;
      </ArkPagination.NextTrigger>
    </ArkPagination.Root>
  );
};
