<template>
  <div class="flex row items-center no-wrap logo-component">
    <LogoIcon
      :class="{ 
        'is-animated': animated, 
        'hide-bg': !withBackground
      }"
      :style="iconStyle"
    />

    <div
      :class="'text-' + textColor"
      class="logo-text"
      style="margin-left: 0.15em;"
      >
      <span>tg</span>
      <span class="text-bold">Crew</span>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue'
  import { getCssVar } from 'quasar'
  import LogoIcon from 'components/BaseLogoSvg.vue'
  
  interface Props {
    textColor?: string
    iconColor?: string
    withBackground?: boolean
    animated?: boolean
  }

  const props = withDefaults(defineProps<Props>(), {
    textColor: 'primary',
    iconColor: 'primary',
    withBackground: false,
    animated: true
  })

  const iconStyle = computed(() => {
    const color = getCssVar(props.iconColor) || props.iconColor

    return {
      color: color,
      transform: 'scale(1.08)',
      height: '1cap'
    }
  })
</script>

<style lang="scss" scoped>
  .hide-bg :deep(.logo-bg) {
    display: none;
  }
</style>
