<template>
  <div class="w-logotype row non-selectable" :class="{ 'logotype-margin': !!text }">
    <div v-if="orientation === 'vertical'" class="column">
      <img class="self-end" :src="dark ? darkLogoUrl : logoUrl" alt="Logo">
      <div v-if="text" class="text-h4 text-product-name self-end">
        {{ text }}
      </div>
    </div>
    <div v-else class="row">
      <img class="self-end" :src="dark ? darkLogoUrl : logoUrl" alt="Logo">
      <div class="separator" />
      <div v-if="text" class="text-h4 text-product-name self-center">
        {{ text }}
      </div>
    </div>
  </div>
</template>

<script>
import logoLight from "../../../assets/logo/wywm-light.svg";
import logoDark from "../../../assets/logo/wywm-dark.svg";

export default {
  name: "WLogotype",
  props: {
    orientation: {
      type: String,
      default: "vertical",
    },
    text: {
      type: String,
      default: null,
    },
    dark: {
      type: Boolean,
      default: false,
    },
    logoUrl: {
      type: String,
      default: logoLight,
    },
    darkLogoUrl: {
      type: String,
      default: logoDark,
    },
  },
};
</script>
