<template>
  <div class="user-text">
    <el-button type="primary" :icon="ArrowLeft" class="back" v-if="userText.backText" @click="handleBack">{{ userText.backText
    }}</el-button>
    <h2 v-if="userText.title">{{ userText.title }}</h2>
    <p class="text" v-if="userText.text">{{ userText.text }}</p>
    <p class="account" v-if="userText.account">{{ userText.account }}</p>
  </div>
</template>

<script lang="ts" setup>

defineOptions({
  name: 'Text'
})
import { ArrowLeft } from '@element-plus/icons-vue'
interface UserText {
  backText: string
  title: string
  text: string
  account: string
}

const props = withDefaults(
  defineProps<{
    userText?: Partial<UserText>
  }>(),
  {
    userText: () => ({
      backText: '',
      title: '',
      text: '',
      account: ''
    })
  }
)

const emit = defineEmits(['back'])

const handleBack = () => {
  emit('back')
}
</script>

<style scoped lang="scss">
.user-text {
  margin-bottom: 24px;

  .back {
    background-color: transparent;
    border: none;
    color: #000;
    margin-bottom: 10px;
    padding: 0;
  }

  h2 {
    margin-bottom: 10px;
  }

  .text {
    margin-bottom: 10px;
  }
}
</style>