<script lang="ts" setup>
import { inject, type Ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
// Components
import { Button } from '~/components/pub/ui/button'

const props = defineProps<{
  rec: { sepNumber: string; }
}>()

const route = useRoute()
const router = useRouter()
const record = props.rec || {}
const recSepId = inject('rec_sep_id') as Ref<string>

function handleSelection() {
  recSepId.value = record.sepNumber || ''
  const pathUrl = `/integration/bpjs-vclaim/sep/${record.sepNumber || ''}/link?source-path=${route.path}`
  router.push(pathUrl)
}
</script>

<template>
  <Button
    variant="outline"
    type="button"
    class="h-[40px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50"
    @click="handleSelection"
  >
    Detail SEP
  </Button>
</template>
