<template>
  <button type="button" class="mc-datatable__btn">
    <MIcon
      v-if="!expanded"
      name="ControlCircleMore24"
      class="mc-datatable__btn-icon"
    />
    <MIcon v-else name="ControlCircleLess24" class="mc-datatable__btn-icon" />

    <span v-if="label" class="mc-datatable__btn-label">
      {{ label }}
    </span>
  </button>
</template>

<script>
import { defineComponent } from 'vue';
export default defineComponent({ name: 'MDataTableExpandButton' });
</script>

<script setup>
import MIcon from '../icon/MIcon.vue';

defineProps({
  /**
   * The button label
   */
  label: {
    type: String,
    default: null,
  },
  /**
   * Determines whether the button is expanded or not
   */
  expanded: {
    type: Boolean,
    default: false,
  },
});
</script>

<style lang="scss" scoped>
@import 'settings-tools/all-settings';
@import 'components/c.datatable-tools';

.mc-datatable {
  &__btn {
    &:disabled {
      .mc-datatable__btn-icon {
        border-color: transparent;
        fill: $color-button-bordered-disabled-font;
        cursor: not-allowed;
      }
    }
  }
}
</style>
