<template>
  <div class="flex row items-center no-wrap logo-component">
    <LogoIcon
      v-bind="$attrs"
      class="logo-svg" 
      :class="{ 
        'is-animated': animated, 
        'hide-bg': !withBackground
      }"
      :style="{ color: iconColor }"
    />

    <div :class="'text-' + textColor" class="logo-text q-ml-xs">
      <span>tg</span>
      <span class="text-bold">Crew</span>
    </div>
  </div>
</template>

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

  withDefaults(defineProps<Props>(), {
    textColor: 'brand',
    iconColor: 'white',
    withBackground: true,
    animated: true
  })
</script>

<style lang="scss" scoped>
  .logo-svg {
    height: 24px;
    width: 24px;

    :deep(.logo-bg) {
      transition: opacity 0.3s;
    }

    &.hide-bg :deep(.logo-bg) {
      display: none;
    }

    :deep(.x), :deep(.c) { 
      transform-box: fill-box; 
    }
    
    &.is-animated {
      :deep(.x) { animation: expand-r 6s ease-in-out infinite; }
      :deep(.c) { animation: o 6s ease-in-out infinite; }
      :deep(.l) {
        stroke-dasharray: 1; 
        stroke-dashoffset: 1;
        stroke-width: 1.5;
        animation: draw 6s ease-in-out infinite;
      }
    }
  }

  @keyframes expand-r { 50% { r: 8px; } }
  @keyframes o { 50% { transform: var(--t); } }
  @keyframes draw {
    0%, 100% { stroke-dashoffset: 0; }
    50% { stroke-dashoffset: 1; }
  }
</style>
