<template>
  <div
    class="output-wrapper"
    :class="{
      'no-name': !props.name,
      'output--variant-1': props.variant === 1,
      'output--variant-2': props.variant === 2,
      'output--variant-3': props.variant === 3,
    }"
  >
    <div class="output-left">
      <div class="output-text">{{ props.name }}</div>
      <div class="output-price">
        <slot name="price">
          {{ props.price }}
        </slot>
      </div>
    </div>
    <div class="output-right" v-if="slots.end">
      <slot name="end"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useSlots, withDefaults } from 'vue';
interface Props {
  name?: string;
  price?: string | number;
  variant?: number;
}
const props = withDefaults(defineProps<Props>(), {
  variant: 1,
  name: '',
  price: '',
});

const slots = useSlots();
</script>

<style lang="sass">
.output-wrapper
    height: 100%
    display: flex
    flex-direction: row
    &.no-name
        gap: 0
        align-items: center
        justify-content: center
    &.output--variant-1
        padding: 16px
        border: 1px solid #2D2D2D
        border-radius: var(--border-radius, 12px)
        background-color: var(--color-input)
    &.output--variant-2
        border-bottom: 1px solid var(--color-grey)
        padding: 8px
    &.output--variant-3
        padding: 8px
    .output-left
        display: flex
        flex-direction: column
        gap: 8px
        text-align: left
        .output-price
            font-size: 18px
            letter-spacing: 3px
        .output-text
            font-size: 14px
            font-weight: bold
    .output-right
        margin-left: auto
        align-self: center
</style>
