import ecreIcons from '../../../components/core/icons';
const SelectPerPagination = ({ startIndex, endIndex, totalItems, itemsPerPage, onItemsPerPageChange }) => {
    return (
        <div className="ecre-flex ecre-items-center ecre-gap-2">
            <span className="ecre-text-sm ecre-text-gray-900">
                {startIndex}-{Math.min(endIndex, totalItems)} of {totalItems}
            </span>
            {/* rest of component stays the same */}
            <div className="ecre-relative">
                <select 
                    value={itemsPerPage} 
                    onChange={(e) => onItemsPerPageChange(Number(e.target.value))}
                    className="!ecre-appearance-none !ecre-bg-none !ecre-pl-2 !ecre-pr-6 ecre-py-1 !ecre-border !ecre-border-gray-200 !ecre-rounded !ecre-text-sm !ecre-text-gray-900 !ecre-shadow-none focus:ecre-outline-none"
                >
                <option value={10}>10</option>
                <option value={25}>25</option>
                <option value={50}>50</option>
                <option value={100}>100</option>
                </select>
                <span className="ecre-absolute ecre-right-[10px] ecre-top-1/2 ecre-transform -ecre-translate-y-1/2 ecre-text-gray-900 ecre-pointer-events-none">{ecreIcons.angleDown}</span>
            </div>
        </div>
    );
};

export default SelectPerPagination;