<template>
  <div class="card bg-base-100 border border-base-300 shadow">
    <div class="card-body gap-4">
      <div class="flex justify-between items-start gap-3">
        <div>
          <h3 class="font-semibold text-base-content text-lg">{{ team.name }}</h3>
          <p class="text-sm text-base-content/60 mt-1">
            {{ $t('teams.created') }}: {{ formatDate(team.createdAt) }}
          </p>
        </div>
      </div>

      <!-- Members Preview -->
      <div class="space-y-2">
        <div class="flex items-center justify-between">
          <span class="text-sm font-medium text-base-content/80">{{ $t('teams.members') }}</span>
          <span class="text-sm text-base-content/60">{{ membersCount }}</span>
        </div>
        
        <div class="flex -space-x-2">
          <div 
            v-for="(member, index) in displayMembers" 
            :key="member.id"
            class="w-8 h-8 rounded-full bg-primary text-primary-content border-2 border-base-100 flex items-center justify-center text-xs font-medium"
            :title="member.userId"
          >
            {{ getInitials(member.userId) }}
          </div>
          <div 
            v-if="remainingMembers > 0"
            class="w-8 h-8 rounded-full bg-base-300 text-base-content border-2 border-base-100 flex items-center justify-center text-xs font-medium"
          >
            +{{ remainingMembers }}
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  team: Team
}

const props = defineProps<Props>()
const membersCount = computed(() => props.team?.members?.length || 1)
const displayMembers = computed(() => (props.team?.members || []).slice(0, 3))
const remainingMembers = computed(() => Math.max(0, membersCount.value - 3))

const formatDate = (dateString: string) => {
  if (!dateString) return ''
  try {
    return new Date(dateString).toLocaleDateString('ru-RU')
  } catch (e) {
    return dateString
  }
}

const getInitials = (userId: string) => {
  if (!userId) return '??'
  return userId.substring(0, 2).toUpperCase()
}
</script>
