<template>
  <CardShell variant="detail">
    <div class="min-h-[48px] flex items-center px-[16px]  border-b border-ink-200">
      <div
        class="w-[30px] h-[30px] text-[22px] leading-[28px] mr-[8px] rounded-full bg-[#f8fafc] text-[#334155] font-bold text-center"
        @click="$emit('back')">
        <van-icon name="arrow-left" size="16" color="#CBD5E1"></van-icon>
      </div>
      <div class="flex-1 text-[#1e293b] text-[14px] font-bold truncate">{{ 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>
