<template>
  <div class="monaco-logo" :class="sizeClass">
    <v-img 
      :src="logoSrc" 
      :width="logoWidth" 
      :height="logoHeight"
      class="logo-img"
      alt="MonacoUSA Logo"
      :style="logoStyle"
    />
  </div>
</template>

<script setup lang="ts">
interface Props {
  size?: 'small' | 'medium' | 'large'
  variant?: 'default' | 'white' | 'dark'
  clickable?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  size: 'medium',
  variant: 'default',
  clickable: false
});

const emit = defineEmits<{
  click: []
}>();

// Computed properties for responsive sizing
const sizeClass = computed(() => `monaco-logo--${props.size}`);

const logoSrc = computed(() => {
  // Use the high-res Monaco flag image
  return '/MONACOUSA-Flags_376x376.png';
});

const logoWidth = computed(() => {
  switch (props.size) {
    case 'small': return 32;
    case 'medium': return 48;
    case 'large': return 80;
    default: return 48;
  }
});

const logoHeight = computed(() => {
  switch (props.size) {
    case 'small': return 32;
    case 'medium': return 48;
    case 'large': return 80;
    default: return 48;
  }
});

const logoStyle = computed(() => {
  const baseStyle: Record<string, string> = {
    borderRadius: '8px',
    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)'
  };

  if (props.clickable) {
    baseStyle.cursor = 'pointer';
    baseStyle.transition = 'transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out';
  }

  if (props.variant === 'white') {
    baseStyle.backgroundColor = 'white';
    baseStyle.padding = '4px';
  } else if (props.variant === 'dark') {
    baseStyle.backgroundColor = 'rgba(0, 0, 0, 0.1)';
    baseStyle.padding = '4px';
  }

  return baseStyle;
});

// Handle click events
const handleClick = () => {
  if (props.clickable) {
    emit('click');
  }
};
</script>

<style scoped>
.monaco-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.monaco-logo--small {
  min-width: 32px;
  min-height: 32px;
}

.monaco-logo--medium {
  min-width: 48px;
  min-height: 48px;
}

.monaco-logo--large {
  min-width: 80px;
  min-height: 80px;
}

.logo-img {
  object-fit: cover;
  border-radius: inherit;
}

.monaco-logo:hover .logo-img {
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(163, 21, 21, 0.2);
}

/* Ensure the logo maintains aspect ratio */
.v-img {
  flex-shrink: 0;
}

/* Animation for clickable logos */
.monaco-logo[style*="cursor: pointer"]:hover {
  transform: translateY(-2px);
}

.monaco-logo[style*="cursor: pointer"]:active {
  transform: translateY(0);
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  .logo-img,
  .monaco-logo {
    transition: none !important;
    transform: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .logo-img {
    border: 2px solid currentColor;
  }
}

/* Print styles */
@media print {
  .monaco-logo {
    box-shadow: none !important;
  }
  
  .logo-img {
    transform: none !important;
  }
}
</style>
