<template>
    <div class="cms-list-pagination mt-16">
        <el-pagination
            v-model:current-page="page"
            v-model:page-size="limit"
            :page-sizes="pageSizes"
            :total="total"
            layout="total, sizes, prev, pager, next"
            @change="onChange"
        />
    </div>
</template>

<script setup lang="ts">
const pageSizes = [10, 20, 50];

defineProps({
    total: {
        type: Number,
        required: true
    }
});

const page = defineModel<number>('page', { required: true });
const limit = defineModel<number>('limit', { required: true });

const emit = defineEmits<{
    change: [page: number, limit: number];
}>();

const onChange = (nextPage: number, nextLimit: number): void => {
    emit('change', nextPage, nextLimit);
};
</script>

<style scoped lang="scss">
@use '@/styles/breakpoints' as *;

.cms-list-pagination {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: $cms-bp-tablet) {
    .cms-list-pagination {
        justify-content: center;
        overflow-x: auto;
    }

    .cms-list-pagination :deep(.el-pagination) {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: $cms-bp-phone) {
    .cms-list-pagination :deep(.el-pagination__sizes),
    .cms-list-pagination :deep(.el-pagination__total) {
        display: none;
    }

    .cms-list-pagination :deep(.el-pagination) {
        --el-pagination-button-width: 28px;
        --el-pagination-button-height: 28px;
        font-size: 12px;
    }
}
</style>
