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

const props = defineProps<{
  eyebrow?: string
  title?: string
  description?: string
  icon?: Component
}>()

const label = computed(() => props.eyebrow ?? props.title ?? 'Admin')
</script>

<template>
  <section
    class="rounded-2xl border border-violet-100 bg-white/85 px-4 py-3 shadow-[0_12px_32px_rgba(124,92,255,0.07)]"
    :aria-label="label"
  >
    <div class="flex min-w-0 items-start gap-3">
      <span
        v-if="icon"
        class="grid h-9 w-9 shrink-0 place-items-center rounded-xl border border-violet-100 bg-violet-50 text-violet-600"
      >
        <component :is="icon" class="h-4 w-4" />
      </span>

      <div class="min-w-0">
        <p class="truncate text-[11px] font-bold uppercase tracking-[0.18em] text-violet-600">
          {{ label }}
        </p>
        <p v-if="description" class="mt-1 max-w-4xl text-sm leading-5 text-slate-500">
          {{ description }}
        </p>
      </div>
    </div>
  </section>
</template>
