import { translate } from '../../Helper';

const Pagination = ({ currentPage, totalPages, onPageChange }) => {
  return (
    <div className="ecre-flex ecre-justify-center ecre-mt-4">
        <div className="ecre-pagination ecre-overflow-hidden ecre-bg-white ecre-rounded-sm ecre-border ecre-border-solid ecre-leading-[1] ecre-border-gray-200">
            <button
                onClick={() => onPageChange(currentPage - 1)}
                className={`ecre-h-8 ecre-min-w-8 ecre-px-3 ecre-border-0 ecre-border-solid !ecre-shadow-none !ecre-outline-none ecre-rounded-none ecre-justify-center ecre-items-center ecre-inline-flex !ecre-text-[#1e1e1e] ecre-text-sm ecre-font-normal ecre-leading-[21px] hover:!ecre-text-[#1e1e1e] !ecre-bg-transparent ${currentPage === 1 ? 'ecre-opacity-50 ecre-cursor-not-allowed' : ' ecre-opacity-100 ecre-cursor-pointer hover:!ecre-text-[#6a40d5]'}`}
                disabled={currentPage === 1}
            >{translate('prev')}</button>
            {[...Array(totalPages)].map((_, index) => {
                const page = index + 1;
                if (page === 1 || page === totalPages || (page >= currentPage - 1 && page <= currentPage + 1)) {
                    return (
                    <button
                            key={page}
                            onClick={() => onPageChange(page)}
                            className={`ecre-h-8 ecre-min-w-8 ecre-p-1 ecre-cursor-pointer ecre-border-0 ecre-border-solid !ecre-shadow-none !ecre-outline-none ecre-border-l ecre-rounded-none !ecre-border-[#e0e0e0] ecre-justify-center ecre-items-center ecre-inline-flex ecre-text-sm ecre-font-normal ecre-leading-[21px] hover:!ecre-bg-[#6a40d5] hover:ecre-text-white ${currentPage === page ? '!ecre-bg-[#6a40d5] ecre-text-white' : '!ecre-bg-transparent ecre-text-[#1e1e1e]'}`}
                        >
                            {page}
                        </button>
                    );
                } else if (page === currentPage - 2 || page === currentPage + 2) {
                    return <span key={page} className="ecre-h-8 ecre-min-w-8 ecre-cursor-pointer ecre-border-0 ecre-border-solid !ecre-shadow-none !ecre-outline-none ecre-border-l ecre-rounded-none !ecre-border-[#e0e0e0] ecre-justify-center ecre-items-center ecre-inline-flex ecre-text-sm ecre-font-normal ecre-leading-[21px]">...</span>;
                }
                return null;
            })}
            <button
                onClick={() => onPageChange(currentPage + 1)}
                className={`ecre-h-8 ecre-min-w-8 ecre-px-3 ecre-border-0 ecre-border-solid !ecre-shadow-none !ecre-outline-none ecre-border-l ecre-rounded-none !ecre-border-[#e0e0e0] ecre-justify-center ecre-items-center ecre-inline-flex !ecre-text-[#1e1e1e] ecre-text-sm ecre-font-normal ecre-leading-[21px] hover:!ecre-text-[#1e1e1e] !ecre-bg-transparent ${currentPage === totalPages ? 'ecre-opacity-50 ecre-cursor-not-allowed' : ' ecre-opacity-100 ecre-cursor-pointer hover:!ecre-text-[#6a40d5]'}`}
                disabled={currentPage === totalPages}
            >{translate('next')}</button>
        </div>
    </div>
  );
};

export default Pagination;