<template>
  <view class="cat-icon" :class="[size, { selected }]" :style="iconStyle">
    <text class="icon-text" :style="{ color: color, fontSize: fontSize }">{{ label }}</text>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = withDefaults(defineProps<{
  label: string
  color: string
  bgColor?: string
  size?: 'sm' | 'md' | 'lg'
  selected?: boolean
}>(), { bgColor: '' })

const sizeMap = { sm: 64, md: 88, lg: 112 }
const fontMap = { sm: 28, md: 36, lg: 48 }

const iconStyle = computed(() => ({
  background: props.selected ? '#FFE8E0' : (props.bgColor || (props.color + '15')),
  width: (sizeMap[props.size || 'md']) + 'rpx',
  height: (sizeMap[props.size || 'md']) + 'rpx',
}))

const fontSize = computed(() => (fontMap[props.size || 'md']) + 'rpx')
</script>

<style lang="scss" scoped>
.cat-icon {
  border-radius: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2rpx solid transparent;
  transition: all 0.2s;
}

.icon-text {
  font-weight: 600;
}

.selected {
  border-color: #FF8C69;
}
</style>
