'use client';

import Button, { IconButton } from '@/components/uikit/button';
import React from 'react';

interface PaginationProps {
  page: number;
  totalPages: number;
  onPageChange?: (page: number) => void;
  className?: string;
}

export default function Pagination({
  page,
  totalPages,
  onPageChange = () => {},
  className,
}: PaginationProps) {
  if (totalPages <= 1) return null;

  const pages = [];
  for (let i = 1; i <= totalPages; i++) {
    pages.push(i);
  }

  return pages.length ? (
    <nav
      className={`mt-8 flex items-center justify-center gap-2 ${className || ''}`}
    >
      <IconButton
        disabled={page === 1}
        onClick={() => onPageChange(page - 1)}
        className="disabled:opacity-50"
      >
        &lt;
      </IconButton>
      {pages.map((p) => (
        <IconButton
          key={p}
          className={`${p === page ? 'opacity-50' : ''}`}
          onClick={() => onPageChange(p)}
        >
          {p}
        </IconButton>
      ))}
      <IconButton
        disabled={page === totalPages}
        onClick={() => onPageChange(page + 1)}
        className="disabled:opacity-50"
      >
        &gt;
      </IconButton>
    </nav>
  ) : (
    <></>
  );
}
