<template>
  <div class="flex items-center gap-[12px] p-[12px] bg-white rounded-18 " :class="{ 'opacity-55': disabled }"
    @click="handleClick">
    <div
      class="flex items-center justify-center w-42 h-42 rounded-14 text-[18px] font-bold text-[#047857] bg-[#ecfdf5]">
      <slot name="icon">{{ icon }}</slot>
    </div>
    <div class="min-w-0 flex-1">
      <div class="text-[#1e293b] text-[14px] font-bold truncate">{{ title }}</div>
      <div v-if="subtitle" class="mt-1 text-slate-400 text-[11px] font-bold truncate">
        {{ subtitle }}
      </div>
    </div>
    <van-icon size="24" color="#CBD5E1" name="arrow"></van-icon>
  </div>
</template>

<script setup>
import { computed, defineProps, defineEmits } from "vue";

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  subtitle: {
    type: String,
    default: "",
  },
  icon: {
    type: String,
    default: "",
  },
  tone: {
    type: String,
    default: "green",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  payload: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits(["action"]);

const handleClick = () => {
  if (props.disabled) return;
  emit("action", props.payload);
};
</script>
