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

const props = defineProps<{
  contractId: string
  serviceId: string | number
}>()

const DB_KEY = computed(() => `hourlyPricing-${props.contractId}-${props.serviceId}`)
const { t } = useI18n()
</script>

<template>
  <HourlyFeeGrid
    :title="t('hourlyFeeGrid.title')"
    :storage-key="DB_KEY"
    :contract-id="props.contractId"
    :service-id="props.serviceId"
    :enable-zx-fw-sync="true"
    sync-field="hourly"
  />
</template>
