<script setup lang="ts">
import type { ButtonControl } from '@/components/inspector/controls'
import BaseNamedControlView from './BaseNamedControlView.vue'

const {
  control,
} = defineProps<{
  control: ButtonControl
}>()
</script>

<template>
  <BaseNamedControlView :control>
    <div class="tw:flex tw:flex-row tw:gap-2 tw:items-center tw:justify-start">
      <button
        type="button"
        :disabled="control.disabled"
        class="control-button"
        @click="control.action"
      >
        <component
          :is="control.icon"
          v-if="control.icon"
          class="control-button__icon"
        />
        <span class="control-button__text">{{ control.text }}</span>
      </button>
    </div>
  </BaseNamedControlView>
</template>

<style scoped></style>
