<!-- SideBarLogo.vue -->
<template>
  <div class="sidebar-logo">
    <img 
      v-if="logoUrl" 
      :src="logoUrl" 
      :alt="altText"
      @error="handleImageError"
      class="logo-image"
    >
    <div v-else class="logo-placeholder">
      {{ makeNameInitials }}
    </div>
  </div>
</template>

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

const props = defineProps({
  logoUrl: {
    type: String,
    default: ''
  },
  makeName: {
    type: String,
    default: 'Logo'
  }
});

const altText = computed(() => props.makeName || 'Logo');
const makeNameInitials = computed(() => {
  return props.makeName
    .split(' ')
    .map(word => word.charAt(0))
    .join('')
    .toUpperCase()
    .slice(0, 2);
});

const handleImageError = () => {
  console.warn('Logo image failed to load:', props.logoUrl);
};
</script>

<style scoped>
.sidebar-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo-image {
  max-width: 100%;
  max-height: 60px;
  object-fit: contain;
}

.logo-placeholder {
  width: 50px;
  height: 50px;
  background: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 1.2rem;
}
</style>