<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import HtFeeMethodGrid from '@/features/shared/components/HtFeeMethodGrid.vue'
import { getAdditionalWorkListEntries } from '@/sql'

const props = defineProps<{
  contractId: string
  contractName?: string
}>()
const { t, locale } = useI18n()

const STORAGE_KEY = computed(() => `htExtraFee-${props.contractId}-additional-work`)
const additionalWorkNames = computed(() =>
  getAdditionalWorkListEntries(locale.value).map(item => ({ id: item?.id, name: item?.name }))
)
</script>

<template>
  <HtFeeMethodGrid
    :title="t('htFee.additionalTitle')"
    :storageKey="STORAGE_KEY"
    :contract-id="props.contractId"
    :contract-name="props.contractName"
    :fixed-names="additionalWorkNames"
  />
</template>
