import React from 'react';
import { Pagination } from './schema';
import { getTranslation, LanguageKey } from './language';

interface PaginationToolsComponentProps {
  pagination: Pagination;
  updatePagination: (updates: Partial<Pagination>) => void;
  lang?: LanguageKey;
}

export function PaginationToolsComponent({
  pagination,
  updatePagination,
  lang = 'en'
}: PaginationToolsComponentProps) {
  const t = getTranslation(lang);

  const handlePageChange = (newPage: number) => {
    if (newPage >= 1 && newPage <= pagination.totalPages) {
      updatePagination({ page: newPage });
    }
  };

  const handleSizeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    updatePagination({ size: Number(e.target.value), page: 1 });
  };

  return (
    <div className="bg-white p-4 rounded-lg shadow mb-4">
      <div className="flex flex-wrap justify-between items-center gap-4">
        {/* Navigation buttons */}
        <div className="flex items-center space-x-2">
          <button 
            onClick={() => handlePageChange(pagination.page - 1)}
            disabled={pagination.page <= 1}
            className="px-3 py-1 bg-gray-200 rounded disabled:opacity-50"
          >
            {t.previous}
          </button>
          
          <span className="px-4 py-1">
            {t.page} {pagination.page} {t.of} {pagination.totalPages}
          </span>
          
          <button 
            onClick={() => handlePageChange(pagination.page + 1)}
            disabled={pagination.page >= pagination.totalPages}
            className="px-3 py-1 bg-gray-200 rounded disabled:opacity-50"
          >
            {t.next}
          </button>
        </div>
        
        {/* Items per page selector */}
        <div className="flex items-center space-x-2">
          <label htmlFor="page-size" className="text-sm font-medium">{t.itemsPerPage}</label>
          <select
            id="page-size"
            value={pagination.size}
            onChange={handleSizeChange}
            className="border rounded px-2 py-1"
          >
            {[5, 10, 20, 50].map(size => (
              <option key={size} value={size}>{size}</option>
            ))}
          </select>
        </div>
        
        {/* Pagination stats */}
        <div className="text-sm text-gray-600">
          <div>{t.showing} {pagination.pageCount} {t.of} {pagination.totalCount} {t.items}</div>
          <div>{t.total}: {pagination.allCount} {t.items}</div>
        </div>
      </div>
    </div>
  );
}