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

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

const STORAGE_KEY = computed(() => `htExtraFee-${props.contractId}-reserve`)
const reserveFeeNames = computed(() =>
  getReserveListEntries(locale.value).map(item => ({ name: item.name, id: item.id }))
)
</script>

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