<script setup lang="ts">
import Button from '@/components/Buttons/Button.vue';
import { PhArrowsCounterClockwise, PhFileText, PhMagnifyingGlass } from '@phosphor-icons/vue';

defineProps({
  reportButton: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['runSearch', 'resetForm', 'runReport'])
</script>

<template>
  <div class="filters rounded-2xl">
    <form class="p-4 mx-auto space-y-3 filter-body bg-gray-50 rounded-t-2xl">
      <slot></slot>
    </form>

    <div class="flex justify-end px-4 py-3 filter-footer rounded-b-2xl bg-primary-50">
      <div class="flex flex-wrap gap-3 filter-buttons">
        <Button @on:click="() => emit('resetForm')" label="Ulangi" style-type="outline" class-name="bg-white !text-xs">
          <PhArrowsCounterClockwise size="16" class="ml-1" weight="regular" />
        </Button>

        <Button v-if="reportButton" label="Lihat Laporan" style-type="outline" class-name="bg-white !text-xs"
          @on:click="() => emit('runReport')">
          <PhFileText size="16" class="ml-1" weight="regular" />
        </Button>

        <Button @on:click="() => emit('runSearch')" label="Cari Data" class-name="!text-xs">
          <PhMagnifyingGlass size="16" class="ml-1" weight="regular" />
        </Button>
      </div>
    </div>
  </div>
</template>
