<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" });
const { t } = useI18n();
</script>

<template>
  <div class="container">
    <div class="btn" :class="[active === 'buy' && 'buy']" @click="active = 'buy'">
      {{ t('trade.buy') }}
    </div>
    <div class="btn" :class="[active === 'sell' && 'sell']" @click="active = 'sell'">
      {{ t('trade.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>
