import React from 'react';
import { Button } from '@/components/ui/button';
import { __ } from '@/lib/i18n';

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

export function Pagination({ page, perPage, total, onPageChange, className = '' }: PaginationProps) {
  if (total <= perPage) return null;

  const startItem = ((page - 1) * perPage) + 1;
  const endItem = Math.min(page * perPage, total);
  const totalPages = Math.ceil(total / perPage);

  return (
    <div className={`flex flex-col sm:flex-row justify-between items-center gap-4 pt-4 ${className}`}>
      <div className="text-sm text-muted-foreground order-2 sm:order-1">
        {__('Showing')} {startItem} - {endItem} {__('of')} {total}
      </div>
      <div className="flex gap-2 order-1 sm:order-2">
        <Button
          variant="outline"
          size="sm"
          onClick={() => onPageChange(Math.max(1, page - 1))}
          disabled={page <= 1}
        >
          {__('Previous')}
        </Button>
        <div className="flex items-center sm:hidden text-sm opacity-80 px-2">
          {__('Page')} {page} {__('of')} {totalPages}
        </div>
        <Button
          variant="outline"
          size="sm"
          onClick={() => onPageChange(page + 1)}
          disabled={page >= totalPages}
        >
          {__('Next')}
        </Button>
      </div>
    </div>
  );
}