<template>
    <div class="toggle">
        <button class="left"
                :class="{'active':isLeft,'unactive':!isLeft}"
                @click="toggle(true)"
        ><slot name="left"></slot></button>
        <button class="right"
                :class="{'active':!isLeft,'unactive':isLeft}"
                @click="toggle(false)"
        ><slot name="right"></slot></button>
    </div>
</template>

<script setup lang="ts">
const props = defineProps({
  isLeft: {
    type: Boolean,
    required: true
  }
})

const emit = defineEmits(['update:isLeft'])

const toggle = (value) => {
    emit('update:isLeft', value)
}
</script>

<script lang="ts">
export default {
  name: "classToggle"
}
</script>

<style>
.toggle{
    margin-left: 20px;
    .left{
        border: 3px solid #4A90C4;
        border-radius: 20px 0 0 20px;
        border-right: 0;
        padding: 2px 7px;
        font-weight: 700;
        cursor: pointer;
    }
    .right{
        border: 3px solid #4A90C4;
        border-radius: 0 20px 20px 0;
        padding: 2px 7px;
        font-weight: 700;
        cursor: pointer;
    }
    .unactive{
        color: #70BBDB;
        background-color: #fff;
    }
    .active{
        color: #fff;
        background-color:#4A90C4;
    }
}
</style>