<template>
  <Touchable direction="row" center :padding="[25, 0, 20, 0]" @click="emit('click')">
    <slot name="icon">
      <Image :src="icon" :width="75" :height="46" mode="widthFix" />
    </slot>
    <Width :width="15" />
    <Text 
      :text="title" 
      :color="active ? 'text.titleLight' : 'text.title'"
      :innerClass="titleColorAnim && !active ? 'home-title-color-anim' : ''"
      fontConfig="h4" 
      fontFamily="SongtiSCBlack" 
    />
  </Touchable>
</template>

<script setup lang="ts">
import Image from '@/components/basic/Image.vue';
import Text from '@/components/basic/Text.vue';
import Touchable from '@/components/feedback/Touchable.vue';
import Width from '@/components/layout/space/Width.vue';

const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  icon: {
    type: String,
    default: 'https://xy.wenlvti.net/app_static/images/home/HomeTitleIcon.png',
  },
  lightCount: {
    type: Number,
    default: 2,
  },
  active: {
    type: Boolean,
    default: false,
  },
  titleColorAnim: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(['click']);

defineOptions({
  options: {
    styleIsolation: 'shared',
  },
});
</script>

<style>
@keyframes titleColorAnim {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}
.home-title-color-anim {
  background: linear-gradient(90deg, #62422f, #55989a, #62422f);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: titleColorAnim 2s ease-in-out infinite;
}
</style>