<template>
  <CardShell variant="detail">
    <div class="visual-detail__header flex flex-items-center px-16 border-box border-bottom-F1F5F9">
      <div class="visual-detail__back mr-8 rounded-full bg-F8FAFC color-334155 font-900 text-center"
        @click="$emit('back')">
        <uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
      </div>
      <div class="visual-detail__title flex-full color-1E293B font-size-14 font-900 ellipsis-1">{{ title }}</div>
      <BadgePill v-if="tag" :label="tag" :tone="tone" />
    </div>
    <slot />
  </CardShell>
</template>

<script setup>
import CardShell from "./CardShell.vue";
import BadgePill from "./BadgePill.vue";

defineProps({
  title: {
    type: String,
    default: "",
  },
  tag: {
    type: String,
    default: "",
  },
  tone: {
    type: String,
    default: "green",
  },
});

defineEmits(["back"]);
</script>

<style scoped lang="scss">
@import "./styles/index.scss";
</style>
