<template>
  <button 
    class="page-nav-button" 
    :class="[`page-nav-button--${type}`, `page-nav-button--${clientType}`]"
    @click="handleClick"
  >
    <img v-if="type === 'prev'" :src="prePageIcon" class="page-nav-button__icon" alt="上一页" />
    
    <span class="page-nav-button__text">{{ text }}</span>
    
    <img v-if="type === 'next'" :src="nextPageIcon" class="page-nav-button__icon" alt="下一页" />
  </button>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import prePageIcon from '../assets/pre-page-icon.svg'
import nextPageIcon from '../assets/next-page-icon.svg'

interface Props {
  type: 'prev' | 'next'
  clientType?: 'pc' | 'mobile' | 'ipad'
}

const props = withDefaults(defineProps<Props>(), {
  clientType: 'pc'
})

const emit = defineEmits<{
  click: []
}>()

const text = computed(() => {
  return props.type === 'prev' ? '上一页' : '下一页'
})

const handleClick = () => {
  emit('click')
}
</script>

<style scoped>
.page-nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.30);
    backdrop-filter: blur(10px);
    border: none;
    border-radius: 999px;
    color: #ffffff;
    cursor: pointer;
    user-select: none;
}

.page-nav-button:hover {
    background: rgba(0, 0, 0, 0.4);
}

.page-nav-button__icon {
    flex-shrink: 0;
}

.page-nav-button__text {
    white-space: nowrap;
}

/* PC 端样式 */
.page-nav-button--pc {
    padding: 6px 12px;
    gap: 4px;
}

.page-nav-button--pc .page-nav-button__icon {
    width: 16px;
    height: 16px;
}

.page-nav-button--pc .page-nav-button__text {
    font-size: 12px;
    line-height: 16px;
}


/* iPad 样式 */
.page-nav-button--ipad {
    padding: 10px 20px;
    gap: 8px;
}

.page-nav-button--ipad .page-nav-button__icon {
    width: 20px;
    height: 20px;
}

.page-nav-button--ipad .page-nav-button__text {
    font-size: 18px;
    line-height: 28px;
}

/* 移动端样式 */
.page-nav-button--mobile {
    padding: 10px 20px;
    gap: 8px;
}

.page-nav-button--mobile .page-nav-button__icon {
    width: 20px;
    height: 20px;
}

.page-nav-button--mobile .page-nav-button__text {
    font-size: 18px;
    line-height: 28px;
}
</style>
