<script setup lang="ts">
import { useAuth } from '@/composables/useAuth'

withDefaults(defineProps<{
  size?: 'sm' | 'md' | 'lg'
  showText?: boolean
}>(), {
  size: 'md',
  showText: true,
})

const { config } = useAuth()
</script>

<template>
  <div class="flex items-center gap-3">
    <!--
      Replace this placeholder with your actual logo:
      <img src="/images/logo.svg" alt="Logo" :class="iconSizeClass">
    -->
    <div
      class="flex items-center justify-center rounded-xl bg-primary-500 text-white font-bold"
      :class="{
        'size-8 text-sm': size === 'sm',
        'size-12 text-xl': size === 'md',
        'size-16 text-2xl': size === 'lg',
      }"
    >
      {{ config.appName.charAt(0).toUpperCase() }}
    </div>

    <span
      v-if="showText"
      class="font-semibold text-gray-900 dark:text-white"
      :class="{
        'text-lg': size === 'sm',
        'text-2xl': size === 'md',
        'text-3xl': size === 'lg',
      }"
    >
      {{ config.appName }}
    </span>
  </div>
</template>
