<template>
  <div :class="`ivyforms-logo ${props.orientation}`">
    <LogoHorizontal v-if="props.orientation === 'horizontal'" />
    <LogoHorizontalSmall v-else-if="props.orientation === 'horizontalSmall'" />
    <LogoVertical v-else-if="props.orientation === 'vertical'" />
    <LogoOnly v-else />
  </div>
</template>

<script setup lang="ts">
import LogoHorizontal from '@/assets/images/logos/logo-horizontal.svg'
import LogoHorizontalSmall from '@/assets/images/logos/logo-horizontal-m.svg'
import LogoVertical from '@/assets/images/logos/logo-vertical.svg'
import LogoOnly from '@/assets/images/logos/logo-only.svg'

type Props = {
  orientation: 'horizontal' | 'horizontalSmall' | 'vertical' | 'logoOnly'
}

const props = withDefaults(defineProps<Props>(), {
  orientation: 'horizontal',
})
</script>

<style lang="scss">
// Logo
.ivyforms-logo {
  display: flex;
  align-items: center;
}
</style>
