<template>
    <div
        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";

const props = 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>