<script setup>
import BaseIcon from "./BaseIcon.vue";

const props = defineProps({
  title: { type: String, default: "" },
  value: { type: [String, Number], default: "" },
  icon: { type: String, default: "" },
  iconBgClass: {
    type: String,
    default: "bg-primary-100 dark:bg-primary-900/40",
  },
  iconColorClass: {
    type: String,
    default: "text-primary-600 dark:text-primary-400",
  },
});
</script>

<template>
  <button
    type="button"
    class="rounded-xl border border-surface-200 dark:border-surface-700 bg-surface-50 dark:bg-surface-800/80 p-5 text-left hover:shadow-md transition-shadow flex items-start justify-between gap-3 w-full"
    v-bind="$attrs"
  >
    <div class="min-w-0">
      <div class="text-base font-medium text-surface-500 dark:text-surface-400">
        <slot name="title">
          {{ title }}
        </slot>
      </div>
      <div class="text-2xl font-bold text-surface-900 dark:text-surface-0 mt-1">
        <slot name="value">
          {{ value }}
        </slot>
      </div>
    </div>
    <span
      v-if="icon || $slots.icon"
      class="shrink-0 w-10 h-10 rounded-lg flex items-center justify-center"
      :class="iconBgClass"
      aria-hidden="true"
    >
      <slot name="icon">
        <BaseIcon v-if="icon" :name="icon" :class="iconColorClass" />
      </slot>
    </span>
  </button>
</template>
