<script setup lang="ts">
const props = defineProps<{
  smallMode?: boolean
  defaultClass?: string
  class?: string
}>()

const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
const additionalClass = props.class ?? ''
const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-8 [&_button]:!p-0' : ''

type ClickType = 'cancel' | 'edit' | 'submit'

const emit = defineEmits<{
  (e: 'click', type: ClickType): void
}>()

function onClick(type: ClickType) {
  emit('click', type)
}
</script>

<template>
  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
    <div>
      <Button
        variant="destructive"
        type="button"
        @click="onClick('cancel')"
        >
        <Icon name="i-lucide-x"  />
        {{ smallMode ? '' : 'Batal' }}
      </Button>
    </div>
    <div>
      <Button
        variant="secondary"
        type="button"
        @click="onClick('edit')"
      >
        <Icon name="i-lucide-pencil" />
        {{ smallMode ? '' : 'Edit' }}
      </Button>
    </div>
    <div>
      <Button
        type="button"
        @click="onClick('submit')"
      >
        <Icon name="i-lucide-check"  />
        {{ smallMode ? '' : 'Submit' }}
      </Button>
    </div>
  </div>
</template>
