<template>
  <view v-if="message" class="feedback-bar" :class="`feedback-bar--${tone}`">
    {{ message }}
  </view>
</template>

<script setup lang="ts">
withDefaults(
  defineProps<{
    tone?: 'success' | 'error' | 'idle'
    message?: string
  }>(),
  {
    tone: 'idle',
    message: '',
  },
)
</script>

<style lang="scss" scoped>
.feedback-bar {
  min-height: 76rpx;
  padding: 18rpx 24rpx;
  border-radius: 14rpx;
  font-size: 24rpx;
  line-height: 40rpx;

  &--idle {
    background: #f2f3f5;
    color: #4e5969;
  }

  &--success {
    background: #f6ffed;
    color: #389e0d;
  }

  &--error {
    background: #fff2f0;
    color: #cf1322;
  }
}
</style>
