<template>
  <div class="title-select">
    <template v-for="(item, index) in props.data" :key="index">
      <div :class="`button ${props.select === item.value ? 'active' : ''}`" @click="emits('changeSelect', item.value)">{{ item.title }}</div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref, defineEmits } from "vue"
const props = defineProps(["select","data"])
const emits = defineEmits(["changeSelect"])
</script>

<style lang="scss" scoped>
.active{
  background: linear-gradient(rgb(38, 51, 231), rgb(20, 118, 230)) !important;
  color: #fff
}
.title-select {
  width: 100%;
  height: 30px;
  display: flex;
  .button{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(rgb(20, 118, 230), #fff);
    user-select: none;
    cursor: pointer;
    transition: 0.2s;
  }
}
</style>
