<template>
  <div class="visual-action-row flex items-center gap-[12px] p-[12px] bg-white rounded-18 "
    :class="{ 'is-disabled': disabled }" @click="handleClick">
    <div class="visual-action-row__icon flex items-center justify-center w-42 h-42 rounded-14 text-[18px] font-bold"
      :class="toneClass">
      <slot name="icon">{{ icon }}</slot>
    </div>
    <div class="visual-action-row__body flex-1">
      <div class="visual-action-row__title text-[#1e293b] text-[14px] font-bold truncate">{{ title }}</div>
      <div v-if="subtitle" class="visual-action-row__subtitle truncate">
        {{ subtitle }}
      </div>
    </div>
    <div class="visual-action-row__arrow text-[#cbd5e1] font-700">›</div>
  </div>
</template>

<script setup>
import { computed } 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 toneClass = computed(() => `visual-action-row__icon--${props.tone}`);

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

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