<template>
  <li class="activity-list-item" :class="searchClass" @click="$emit('click', $event)">
    <div class="activity-icon-box">
      <img
        v-if="icon"
        :src="icon"
        :style="{ width: normalizeSize(iconWidth), height: normalizeSize(iconHeight) }"
        class="activity-icon"
      />
      <i v-else class="fas fa-circle activity-icon-default"></i>
    </div>
    <div class="activity-content">
      <div class="activity-header">
        <h4 class="activity-title">
          <a href="javascript:void(0);">
            {{ title }}
          </a>
        </h4>
        <span v-if="rightText" class="activity-right-text">{{ rightText }}</span>
      </div>
      <p v-if="subtitle" class="activity-subtitle">{{ subtitle }}</p>
    </div>
  </li>
</template>

<script setup>
defineProps({
  title:       { type: String, required: true },
  subtitle:    { type: String, default: '' },
  rightText:   { type: String, default: '' },
  searchClass: { type: String, default: '' },
  icon:        { type: String, default: '' },
  iconWidth:   { type: [String, Number], default: 30 },
  iconHeight:  { type: [String, Number], default: 30 },
})

defineEmits(['click'])

const normalizeSize = (val) => {
  if (typeof val === 'number') return `${val}px`
  if (typeof val === 'string' && /^\d+$/.test(val)) return `${val}px`
  return val
}
</script>

<style scoped>
.activity-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
  border-radius: 12px;
  transition: background-color 0.2s ease;
  cursor: pointer;
  border-bottom: 1px solid var(--bs-border-color-translucent, #ededed);
}

.activity-list-item:last-child {
  border-bottom: none;
}

.activity-list-item:hover {
  background-color: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.03));
}

.activity-icon-box {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bs-primary-bg-subtle, rgba(13, 110, 253, 0.08));
  overflow: hidden;
}

.activity-icon {
  object-fit: contain;
  border-radius: 4px;
}

.activity-icon-default {
  font-size: 12px;
  color: var(--bs-secondary-color, #717171);
}

.activity-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.activity-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.activity-title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  color: var(--bs-emphasis-color, #1e1e1e);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-title a {
  color: inherit;
  text-decoration: none;
}

.activity-right-text {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--bs-primary, #533dea);
  white-space: nowrap;
}

.activity-subtitle {
  font-size: 0.75rem;
  line-height: 1.4;
  margin: 0;
  color: var(--bs-secondary-color, #717171);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
