<template>
  <div class="hero-check">
    <h2>Status</h2>
    <a-radio-group v-model:value="props.statusValue" @change="onChangeValue">
      <a-radio value="0">All</a-radio>
      <a-radio value="1">Sale</a-radio>
      <a-radio value="2">Purchase</a-radio>
    </a-radio-group>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import { useMarketplaceStore } from "@/store/marketplace"
const marketplaceList = useMarketplaceStore()
const props = defineProps({
  statusValue: {
    type: Number,
    required: true,
  },
});
const emit = defineEmits(['clickStatusChild'])
// const 
const onChangeValue = (e) => {
  emit('clickStatusChild',e.target.value)
};
</script>

<style lang="scss" scoped>
.hero-check {
  h2 {
    font-family: "Poppins";
    font-weight: bold;
    font-size: 20px;
    color: #bb7fff;
    margin-bottom: 10px;
  }
  :deep(.ant-radio-group) {
    display: block;
    .ant-radio-wrapper {
      display: block !important;
      span {
        color: #BB7FFF;
      }
    }
    .ant-checkbox-group-item {
      display: flex !important;
      background: #16141b;
      span {
        color: #BB7FFF !important;
      }
    }
  }
}
</style>
