<script setup lang="ts">
import { useAdminLocale } from '../composables/useAdminLocale';
import type { InitialDepositRemarkKind } from '@thebet365/shared';

const kind = defineModel<InitialDepositRemarkKind | ''>('kind', { default: '' });
const custom = defineModel<string>('custom', { default: '' });

const props = defineProps<{
  operator: 'admin' | 'agent';
}>();

const { t } = useAdminLocale();
</script>

<template>
  <div class="initial-deposit-remark">
    <el-radio-group v-model="kind" class="initial-deposit-remark-options">
      <el-radio value="daily">{{ t('user.initial_deposit_kind.daily') }}</el-radio>
      <el-radio value="opening_bonus">{{ t('user.initial_deposit_kind.opening_bonus') }}</el-radio>
      <el-radio value="custom">{{ t('user.initial_deposit_kind.custom') }}</el-radio>
    </el-radio-group>
    <el-input
      v-if="kind === 'custom'"
      v-model="custom"
      class="initial-deposit-remark-custom"
      :placeholder="t('user.ph.initial_deposit_custom')"
    />
    <div v-else-if="kind === 'daily'" class="field-hint">
      {{ props.operator === 'admin' ? t('finance.remark.admin_deposit') : t('finance.remark.agent_deposit') }}
    </div>
    <div v-else-if="kind === 'opening_bonus'" class="field-hint">
      {{ t('finance.remark.initial_balance') }}
    </div>
  </div>
</template>

<style scoped>
.initial-deposit-remark-options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.initial-deposit-remark-custom {
  margin-top: 8px;
}
</style>
