import React from 'react';
import { useTranslations } from 'next-intl';

const Pagination = ({ currentPage, totalPages, onPageChange }) => {
  const t = useTranslations('pagination');
  const pages = Array.from({ length: totalPages }, (_, i) => i + 1);

  return (
    <div className="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
      <div className="text-sm text-gray-600">
        {t('page')} {currentPage} {t('of')} {pages.length}
      </div>
      <div className="flex items-center gap-2">
        {currentPage > 1 && (
          <PaginationButton
            text={t('previous')}
            onClick={() => onPageChange(currentPage - 1)}
          />
        )}
        {pages.map((page) => (
          <PaginationNumber
            key={page}
            number={page}
            active={page === currentPage}
            onClick={() => onPageChange(page)}
          />
        ))}
        {currentPage < totalPages && (
          <PaginationButton
            text={t('next')}
            onClick={() => onPageChange(currentPage + 1)}
          />
        )}
      </div>
    </div>
  );
};

const PaginationButton = ({ text, onClick }) => (
  <button
    className="px-3 py-1 text-sm text-gray-600 hover:bg-gray-50 rounded"
    onClick={onClick}
  >
    {text}
  </button>
);

const PaginationNumber = ({ number, active, onClick }) => (
  <button
    className={`w-8 h-8 flex items-center justify-center rounded ${
      active ? 'bg-emerald-500 text-white' : 'text-gray-600 hover:bg-gray-50'
    }`}
    onClick={onClick}
  >
    {number}
  </button>
);

export default Pagination;