<script setup lang="ts">
// Components
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  DialogFooter,
} from '~/components/pub/ui/dialog'
import ListHistory from './list-history.vue'

// Types
import type { SepHistoryData } from './list-cfg.history'
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'

const props = defineProps<{
  open: boolean
  isAction?: boolean
  histories: Array<SepHistoryData>
  paginationMeta?: PaginationMeta
}>()

const emit = defineEmits<{
  (e: 'update:open', value: boolean): void
}>()
</script>

<template>
  <Dialog
    :open="props.open"
    @update:open="emit('update:open', $event)"
  >
    <DialogTrigger as-child></DialogTrigger>
    <DialogContent class="max-w-[50%]">
      <DialogHeader>
        <DialogTitle>History SEP</DialogTitle>
      </DialogHeader>

      <div class="overflow-x-auto rounded-lg border">
        <ListHistory :data="histories" :is-action="props.isAction || false" :pagination-meta="paginationMeta" />
      </div>

      <DialogFooter></DialogFooter>
    </DialogContent>
  </Dialog>
</template>
