<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import BetGuideHelp from '../BetGuideHelp.vue';

const GUIDE_SEEN_KEY = 'thebet365_match_bet_guide_seen';

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

<template>
  <BetGuideHelp
    :title="t('bet.guide_title')"
    :storage-key="GUIDE_SEEN_KEY"
  >
    <div class="flow">
      <p class="flow-name">{{ t('bet.guide_flow_normal') }}</p>
      <ol>
        <li>{{ t('bet.guide_normal_1') }}</li>
        <li>{{ t('bet.guide_normal_2') }}</li>
        <li>{{ t('bet.guide_normal_3') }}</li>
      </ol>
    </div>
    <div class="flow flow-block">
      <p class="flow-name">{{ t('bet.guide_flow_cs') }}</p>
      <ol>
        <li>{{ t('bet.guide_cs_1') }}</li>
        <li>{{ t('bet.guide_cs_2') }}</li>
        <li>{{ t('bet.guide_cs_3') }}</li>
      </ol>
    </div>
    <div class="flow flow-block">
      <p class="flow-name">{{ t('bet.guide_flow_parlay') }}</p>
      <p class="intro">{{ t('bet.guide_parlay_1') }}</p>
    </div>
    <p class="rules-link">{{ t('bet.guide_rules_link') }}</p>
  </BetGuideHelp>
</template>
