<template>
  <div
    class="session-item"
    :class="{ 'is-active': active, 'is-pinned': session.pinned }"
    @click="emit('select')"
  >
    <i class="ph ph-push-pin session-pin-icon"></i>

    <div class="session-info">
      <div class="session-name">{{ displayName }}</div>
      <div v-if="session.preview" class="session-preview">{{ session.preview }}</div>
    </div>

    <div class="session-actions" @click.stop>
      <button
        class="btn-icon"
        :title="session.pinned ? 'Unpin' : 'Pin'"
        @click="emit('pin')"
      >
        <i :class="session.pinned ? 'ph ph-push-pin-slash' : 'ph ph-push-pin'"></i>
      </button>
      <button
        class="btn-icon"
        title="Delete"
        @click="emit('delete')"
      >
        <i class="ph ph-trash"></i>
      </button>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  session: { type: Object, required: true },
  active: { type: Boolean, default: false }
})

const emit = defineEmits(['select', 'delete', 'pin'])

const displayName = computed(() => {
  const id = props.session.session_id ?? ''
  return props.session.name || id.slice(0, 8)
})
</script>