<template>
  <div
    class="p-3 rounded-lg cursor-pointer transition-all"
    :class="[
      isSelected
        ? 'bg-primary/10 border-2 border-primary'
        : 'bg-gray-50 hover:bg-gray-100 border-2 border-transparent'
    ]"
    @click="$emit('click')"
  >
    <Stack gap="2">
      <Stack direction="row" align="start" gap="3">
        <IconCircle :tone="iconTone" size="sm">
          <Icon :name="iconName" size="16" />
        </IconCircle>
        <Stack gap="1" class="flex-1 min-w-0">
          <Text size="sm" weight="semibold" class="truncate">{{ title }}</Text>
          <Text v-if="subtitle" tone="muted" size="xs" class="truncate">{{ subtitle }}</Text>
        </Stack>
      </Stack>

      <Stack v-if="badges.length > 0" direction="row" gap="1" wrap>
        <Badge
          v-for="badge in badges"
          :key="badge.label"
          :variant="badge.variant"
          size="sm"
        >
          {{ badge.label }}
        </Badge>
      </Stack>
    </Stack>
  </div>
</template>

<script setup lang="ts">
interface BadgeItem {
  label: string
  variant: string
}

const props = defineProps<{
  title: string
  subtitle?: string
  iconName: string
  iconTone?: 'primary' | 'success' | 'warning' | 'error' | 'muted'
  badges?: BadgeItem[]
  isSelected?: boolean
}>()

defineEmits<{
  (e: 'click'): void
}>()

const iconTone = computed(() => props.iconTone || 'primary')
const badges = computed(() => props.badges || [])
</script>
