<script setup lang="ts">
import { NCard, NGrid, NGridItem, NInput } from 'naive-ui'

defineProps<{ isEdit: boolean }>()
</script>

<template>
  <NCard :bordered="false" class="rounded-xl shadow-sm">
    <div class="mb-5 flex items-center gap-3 border-l-4 border-green-500 pl-3">
      <span class="text-lg text-gray-800 font-bold">参与队伍</span>
    </div>

    <NGrid :x-gap="16" :y-gap="16" cols="1 m:2 l:4" responsive="screen">
      <NGridItem v-for="i in 4" :key="i">
        <div
          class="relative border rounded-lg bg-gray-50 p-4 transition-all"
          :class="isEdit ? 'border-blue-200 bg-white' : 'border-transparent hover:shadow-md'"
        >
          <div class="mb-3 inline-block rounded bg-gray-200 px-2 py-0.5 text-xs text-gray-600 font-bold">
            TEAM 0{{ i }}
          </div>

          <template v-if="isEdit">
            <NInput size="small" placeholder="输入队伍名称" class="mb-2 font-bold" default-value="重庆树人小学队伍" />
            <NInput size="tiny" placeholder="输入编号" class="font-mono" default-value="BPB-53H-1EN-RL" />
          </template>

          <template v-else>
            <h4 class="m-0 mb-1 text-base text-gray-800 font-bold">
              重庆树人小学队伍
            </h4>
            <p class="m-0 text-xs text-gray-400 font-mono">
              BPB-53H-1EN-RL
            </p>
          </template>
        </div>
      </NGridItem>
    </NGrid>
  </NCard>
</template>
