<!-- 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;
}

.logo-image {
  max-width: 100%;
  max-height: 100%;
  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;
}

/* Mobile-specific styling when used in mobile header */
@media (max-width: 768px) {
  .sidebar-logo {
    padding: 5px 0; /* Reduce padding for mobile header */
  }
  
  .logo-image {
    max-height: 40px; /* Smaller logo for mobile header */
    max-width: 120px;
  }
  
  .logo-placeholder {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
}
</style>