<template>
  <div class="resource-collect-btn">
    <button 
      class="collect-button" 
      :class="{ collected: isCollected }"
      @click="handleCollect"
    >
      <img src="@/assets/imgs/star-icon.svg" alt="collect" />
      <span>{{ isCollected ? '已收藏' : '收藏' }}</span>
    </button>
  </div>
</template>

<script setup lang="ts">
interface Props {
  isCollected: boolean;
}

const props = defineProps<Props>();


const emit = defineEmits<{
  collect: [type: number];
}>();

function handleCollect() {
    if(props.isCollected) {
        // 已收藏，取消收藏
        emit('collect', -1);
    } else {
        // 未收藏，收藏
        emit('collect', 1);
    }
}

</script>

<style lang="scss" scoped>
.resource-collect-btn {
  display: flex;
  justify-content: center;
  margin: 80px 0;
}

.collect-button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 20px;
  background: #FFFFFF;
  border: 1px solid #979797;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  
  img {
    width: 20px;
    height: 20px;
    transition: filter 0.3s;
  }
  
  span {
    font-family: 'PingFang SC';
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #979797;
    transition: color 0.3s;
  }
  
  &:hover {
    border-color: #C62828;
    
    span {
      color: #C62828;
    }
    
    img {
      filter: brightness(0) saturate(100%) invert(17%) sepia(85%) saturate(3207%) hue-rotate(349deg) brightness(92%) contrast(92%);
    }
  }
  
  &.collected {
    border-color: #C62828;
    background: #FFF5F5;
    
    span {
      color: #C62828;
    }
    
    img {
      filter: brightness(0) saturate(100%) invert(17%) sepia(85%) saturate(3207%) hue-rotate(349deg) brightness(92%) contrast(92%);
    }
  }
}
</style>

