<template>
  <button :class="['kuc-action-button', isAdd ? 'add' : 'remove']" :title="title">
    <svg fill="none" width="18" height="18" viewBox="0 0 16 16" aria-hidden="true">
      <path :d="dPath" fill-rule="evenodd" clip-rule="evenodd" :fill="fillPath"></path>
    </svg>
  </button>
</template>

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

const props = defineProps<{ isAdd: boolean; title: string }>();

const dAdd =
  'M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM12.0355 8.49997V7.49997H8.50008V3.96454H7.50008V7.49997H3.96443V8.49997H7.50008V12.0356H8.50008V8.49997H12.0355Z';
const fillAdd = '#3498db';
const dRemove =
  'M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM12.0355 7.49997V8.49997L3.96443 8.49997V7.49997H12.0355Z';
const fillRemove = '#b5b5b5';

const dPath = computed(() => (props.isAdd ? dAdd : dRemove));
const fillPath = computed(() => (props.isAdd ? fillAdd : fillRemove));
</script>
