<script lang='ts' setup>
import type { PropType } from "vue";

type Active = "buy" | "sell";

const active = defineModel<Active>("active", { type: String as PropType<Active>, default: "buy" });
</script>

<template>
  <div class="container">
    <div class="btn" :class="[active === 'buy' && 'buy']" @click="active = 'buy'">
      买入
    </div>
    <div class="btn" :class="[active === 'sell' && 'sell']" @click="active = 'sell'">
      卖出
    </div>
  </div>
</template>

<style lang='css' scoped>
@reference "tailwindcss";

.container {
  @apply flex rounded-full overflow-hidden p-0.5 bg-(--ion-color-faint);
}
.btn {
  @apply flex-1 text-center py-0.5 cursor-pointer select-none text-sm font-medium rounded-full transition-all text-(--ion-text-color-step-550);
}
.btn.buy {
  @apply bg-(--ion-color-success-tint) text-white;
}
.btn.sell {
  @apply bg-(--ion-color-danger-tint) text-white;
}
</style>
