<template>
  <div class="divide-y divide-gray-100">
    <div
      v-for="conv in items"
      :key="conv.id"
      class="group py-3 flex items-start justify-between cursor-pointer hover:bg-gray-50 rounded-lg px-2 -mx-2 transition-colors duration-150"
      @click="viewConversation(conv)"
      role="button"
      tabindex="0"
      @keydown.enter="viewConversation(conv)"
      @keydown.space.prevent="viewConversation(conv)"
    >
      <div class="min-w-0 flex-1">
        <div class="flex items-center gap-2">
          <span class="text-sm font-medium text-gray-900 truncate hover:text-blue-600 transition-colors">{{ conv.user }}</span>
          <span class="text-xs text-gray-500">• {{ conv.time }}</span>
        </div>
        <div class="text-sm text-gray-600 truncate">
          {{ conv.snippet }}
        </div>
      </div>
      <div class="flex items-center gap-2 ml-3">
        <span :class="['text-xs px-2 py-1 rounded-full whitespace-nowrap', conv.status === 'open' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-700']">
          {{ conv.status === 'open' ? 'Open' : 'Closed' }}
        </span>
        <!-- Arrow icon to indicate clickable -->
        <svg class="w-4 h-4 text-gray-400 group-hover:text-gray-600 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
        </svg>
      </div>
    </div>

    <!-- Empty state -->
    <div v-if="!items || items.length === 0" class="py-8 text-center text-gray-500">
      <div class="text-sm">No recent conversations</div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const props = defineProps({
  items: { type: Array, default: () => [] }
})

const router = useRouter()

// Navigate to conversation detail page
const viewConversation = (conversation) => {
  router.push({
    name: 'ConversationDetail',
    params: { id: conversation.id }
  })
}
</script>

