<script setup lang="ts">
import type { SeatKey } from '../../game/seat'
import type { DeskSeatState } from '../../views/chengdu/types'

defineProps<{
  deskSeats: Record<SeatKey, DeskSeatState>
}>()
</script>

<template>
  <div v-if="deskSeats.top.tiles.length > 0 || deskSeats.top.hasHu" class="desk-zone desk-zone-top">
    <img
      v-for="tile in deskSeats.top.tiles"
      :key="tile.key"
      class="desk-tile"
      :class="{ 'is-group-start': tile.isGroupStart, 'is-covered': tile.imageType === 'covered' }"
      :src="tile.src"
      :alt="tile.alt"
    />
    <span v-if="deskSeats.top.hasHu" class="desk-hu-flag">胡</span>
  </div>
  <div v-if="deskSeats.right.tiles.length > 0 || deskSeats.right.hasHu" class="desk-zone desk-zone-right">
    <img
      v-for="tile in deskSeats.right.tiles"
      :key="tile.key"
      class="desk-tile"
      :class="{ 'is-group-start': tile.isGroupStart, 'is-covered': tile.imageType === 'covered' }"
      :src="tile.src"
      :alt="tile.alt"
    />
    <span v-if="deskSeats.right.hasHu" class="desk-hu-flag">胡</span>
  </div>
  <div v-if="deskSeats.bottom.tiles.length > 0 || deskSeats.bottom.hasHu" class="desk-zone desk-zone-bottom">
    <img
      v-for="tile in deskSeats.bottom.tiles"
      :key="tile.key"
      class="desk-tile"
      :class="{ 'is-group-start': tile.isGroupStart, 'is-covered': tile.imageType === 'covered' }"
      :src="tile.src"
      :alt="tile.alt"
    />
    <span v-if="deskSeats.bottom.hasHu" class="desk-hu-flag">胡</span>
  </div>
  <div v-if="deskSeats.left.tiles.length > 0 || deskSeats.left.hasHu" class="desk-zone desk-zone-left">
    <img
      v-for="tile in deskSeats.left.tiles"
      :key="tile.key"
      class="desk-tile"
      :class="{ 'is-group-start': tile.isGroupStart, 'is-covered': tile.imageType === 'covered' }"
      :src="tile.src"
      :alt="tile.alt"
    />
    <span v-if="deskSeats.left.hasHu" class="desk-hu-flag">胡</span>
  </div>
</template>
