<template>
  <div
    @click="$emit('click')"
    class="item flex items-center justify-center ml-4"
    :class="{ 'select-item': selected }"
  >
    {{ value }}
  </div>
</template>

<script setup lang="ts">
import { PropType } from "@vue/runtime-core";

defineEmits(["click"]);

defineProps({
  selected: {
    required: true,
    type: Boolean,
  },
  value: {
    required: true,
    type: String as PropType<string>,
  },
});
</script>

<style>
.item {
  width: 100px;
  height: 35px;
  background: #f5f6f9;
  border-radius: 20px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #1b1f37;
}
.select-item {
  background: #3e4faf;
  color: #ffffff;
}
</style>
