<script setup lang="ts">
defineProps<{
  name: 'home' | 'bet' | 'history' | 'wallet' | 'profile';
}>();
</script>

<template>
  <svg class="nav-icon" viewBox="0 0 24 24" aria-hidden="true">
    <!-- home -->
    <template v-if="name === 'home'">
      <path
        d="M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-5v-6H10v6H5a1 1 0 0 1-1-1v-9.5Z"
        fill="none"
        stroke="currentColor"
        stroke-width="1.75"
        stroke-linejoin="round"
      />
    </template>

    <!-- bet / football -->
    <template v-else-if="name === 'bet'">
      <circle cx="12" cy="12" r="8.25" fill="none" stroke="currentColor" stroke-width="1.75" />
      <path
        d="M12 3.75 14.2 8.5 19.5 9l-3.8 3.2 1.1 5.3L12 15.5 7.2 17.5l1.1-5.3L4.5 9l5.3-.5L12 3.75Z"
        fill="none"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linejoin="round"
      />
    </template>

    <!-- bet history -->
    <template v-else-if="name === 'history'">
      <path
        d="M6 4h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1Z"
        fill="none"
        stroke="currentColor"
        stroke-width="1.75"
        stroke-linejoin="round"
      />
      <path
        d="M8 9h8M8 12.5h8M8 16h5"
        fill="none"
        stroke="currentColor"
        stroke-width="1.75"
        stroke-linecap="round"
      />
    </template>

    <!-- wallet -->
    <template v-else-if="name === 'wallet'">
      <path
        d="M4 7.5A2 2 0 0 1 6 5.5h12a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-9Z"
        fill="none"
        stroke="currentColor"
        stroke-width="1.75"
        stroke-linejoin="round"
      />
      <path
        d="M16 12.5h4v-2h-4a1.25 1.25 0 1 0 0 2.5Z"
        fill="none"
        stroke="currentColor"
        stroke-width="1.75"
        stroke-linejoin="round"
      />
      <path d="M4 9.5h16" fill="none" stroke="currentColor" stroke-width="1.75" />
    </template>

    <!-- profile -->
    <template v-else>
      <circle cx="12" cy="8.5" r="3.25" fill="none" stroke="currentColor" stroke-width="1.75" />
      <path
        d="M5.5 19.5c1.2-3 3.4-4.5 6.5-4.5s5.3 1.5 6.5 4.5"
        fill="none"
        stroke="currentColor"
        stroke-width="1.75"
        stroke-linecap="round"
      />
    </template>
  </svg>
</template>

<style scoped>
.nav-icon {
  width: 22px;
  height: 22px;
  display: block;
  flex-shrink: 0;
}
</style>
