# src/admin/components/base/BaseText.vue
<template>
  <component 
    :is="tag" 
    :class="[
      'base-text',
      {
        'card-text': variant === 'normal',
        'card-text-accent': variant === 'accent',
        'card-title': variant === 'title',
        'card-description': variant === 'description',
        'card-header': variant === 'header'
      }
    ]"
  >
    <slot></slot>
  </component>
</template>

<script setup>
defineProps({
  variant: {
    type: String,
    default: 'normal',
    validator: (value) => ['normal', 'accent', 'title', 'description','header'].includes(value)
  },
  tag: {
    type: String,
    default: 'p'
  }
});
</script>

<style scoped>
.base-text {
  margin-block-start: 0;
  margin-block-end: 0;
}

.card-text {
  font-size: 1rem;
  color: var(--color-navy);
}

.card-header {
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-slate);
  margin-bottom: 1rem;
  text-align: center;
}

.card-text-accent {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-top: 2rem;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-slate);
  margin-bottom: 1.0rem;
}

.title{
  font-size: 18px;
  font-weight: 400;
}

.card-description {
  font-size: 1.0rem;
  color: var(--color-navy);
  margin-bottom: 1rem;
}

.text-group {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
</style>