<template>
  <view class="brand-slogan" :class="[modeClass, { 'brand-slogan--compact': compact }]">
    <view class="brand-slogan__body">
      <image
        class="brand-slogan__logo"
        :class="{ 'brand-slogan__logo--mono': mono }"
        src="/static/icons/pay-socre-logo.png"
        mode="aspectFit"
      ></image>
      <view v-if="hasDivider" class="brand-slogan__divider" :class="{ 'brand-slogan__divider--dark': dark }"></view>
      <text class="brand-slogan__text" :class="{ 'brand-slogan__text--dark': dark }">{{ displayText }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  type?: 'standard' | 'score' | 'orderComplete'
  dark?: boolean
  compact?: boolean
  mono?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  type: 'standard',
  dark: false,
  compact: false,
  mono: false
})

const modeClass = computed(() => `brand-slogan--${props.type}`)

const hasDivider = computed(() => props.type === 'orderComplete')

const displayText = '微信支付分 | 550分以上优享'
</script>

<style lang="scss" scoped>
.brand-slogan {
  display: flex;
  align-items: center;
  min-height: 60rpx;

  &__body {
    display: flex;
    align-items: center;
    gap: 12rpx;
  }

  &__logo {
    width: 36rpx;
    height: 36rpx;
    flex-shrink: 0;

    &--mono {
      opacity: 0.6;
    }
  }

  &__divider {
    width: 2rpx;
    height: 28rpx;
    background: $color-text-tertiary;
    opacity: 0.6;
    flex-shrink: 0;

    &--dark {
      background: $color-text-primary;
    }
  }

  &__text {
    font-size: 24rpx;
    color: $color-text-secondary;
    line-height: 1.5;
    white-space: nowrap;
    font-family: 'PingFang SC', -apple-system, 'Helvetica Neue', sans-serif;

    &--dark {
      color: $color-text-primary;
    }
  }

  &--compact {
    min-height: 48rpx;

    .brand-slogan__logo {
      width: 32rpx;
      height: 32rpx;
    }

    .brand-slogan__text {
      font-size: 22rpx;
    }
  }
}
</style>
