<!-- Pagination component wrapper -->
<script setup lang="ts">
import { ElPagination } from 'element-plus';

// Props
const { totalPosts } = defineProps<{
	totalPosts: number;
}>();

// Pagination data as defineModel
const currentPage = defineModel<number>('current-size');
const pageSize = defineModel<number>('page-size');
</script>

<template>
    <ElPagination
        class="pagination"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[12, 20, 35, 50]"
        :total="totalPosts"
        layout="total, sizes, prev, pager, next, jumper"
        popper-class="select-options"
    />
</template>

<style lang="scss">
.el-pagination.pagination {
	@apply max-sm:grid max-sm:grid-cols-[repeat(4,1fr)] max-sm:w-full place-items-center max-sm:gap-y-2;

    --el-pagination-bg-color: transparent;
    --el-pagination-button-disabled-bg-color: transparent;
    --el-text-color-regular: theme('colors.base-500');
    --el-pagination-button-disabled-color: theme('colors.base-100');
    --el-pagination-hover-color: theme('colors.primary-500');
    --el-pagination-button-color: theme('colors.base-500');

	.el-pagination__total, .el-pagination__sizes {
		@apply max-sm:col-span-2;
	}

	.el-pagination__jump {
		@apply max-sm:col-span-4;

		.el-pagination__classifier {
			@apply m-0;
		}
	}

	> * {
		@apply max-sm:m-0;
	}

    .el-input__wrapper {
        @apply shadow-none border border-neutral-500 transition-colors;

        &.is-focus {
            @apply border-primary-500;
        }

        input {
            @apply border-none text-base-500 shadow-none p-0 min-h-[unset];
        }
    }

    .el-pager {
		@apply max-sm:col-span-2;

        li {
            @apply m-0;

            &.is-active {
                @apply font-normal;
            }
        }
    }

    .el-select {
        --el-input-border-color: theme('colors.neutral-500');
        --el-input-text-color: theme('colors.base-500');

        .el-select__wrapper {
            @apply px-4 shadow-none rounded-lg border border-neutral-500 transition-colors text-center;

            &.is-hovering,
            &.is-focused {
                @apply border-primary-500 shadow-none;
            }

            svg {
                @apply text-base-200;
            }
        }
    }
}

.el-popper.select-options {
    @apply border border-neutral-500;

    --el-popover-border-radius: 0.5rem;
    --el-timepicker-inner-border-color: theme('colors.neutral-500');
    --el-border-color-light: theme('colors.neutral-500');

    .el-select-dropdown__list {
        .el-select-dropdown__item {
            @apply font-primary text-base-500 m-0;

            &.is-selected {
                @apply text-primary-500;
            }

            &.is-hovering {
                @apply bg-neutral-100;
            }

            img {
                margin-right: 0.25rem !important;
            }
        }
    }
}
</style>
