<!-- src/components/alarm/AlarmItem.vue -->
<template>  
  <div 
    class="alarm-item"
    :class="{active: isActive, 'has-new': alarm.hasNew}"
    @click="$emit('click')"
  >
    <div class="a-content">
      {{ alarm.name }}
      <span v-if="alarm.hasNew" class="new-dot"></span>
    </div>
  </div>
</template>

<script setup>
defineProps({
  alarm: {
    type: Object,
    required: true
  },
  isActive: {
    type: Boolean,
    default: false
  }
})

defineEmits(['click'])
</script>

<style scoped>
.alarm-item {
    width: 90%;
    padding: 15px;
    margin-bottom: 10px;
    background: rgba(16, 42, 87, 0.6);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    border: 1px solid #09D2FF;
  
  &:hover {
    background: rgba(58, 139, 255, 0.3);
  }
  
  &.active {
    border-left: 3px solid #ff4d4f;
    background: rgba(58, 139, 255, 0.2);
  }
}

.alarm-item .a-content{
  color: white;
  font-size: 14px;
  position: relative;
  padding-right: 15px;
}

.alarm-time {
  color: rgba(124, 208, 255, 0.7);
  font-size: 12px;
  margin-top: 5px;
}

.new-dot {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: #ff4d4f;
  border-radius: 50%;
}
</style>