<template>
  <div class="visual-action-row flex flex-items-center gap-12 p-12 bg-white rounded-18 border-box"
    :class="{ 'is-disabled': disabled }" @click="handleClick">
    <div
      class="visual-action-row__icon flex flex-items-center flex-justify-center w-42 h-42 rounded-14 font-size-18 font-900"
      :class="toneClass">
      <slot name="icon">{{ icon }}</slot>
    </div>
    <div class="visual-action-row__body flex-full">
      <div class="visual-action-row__title color-1E293B font-size-14 font-900 ellipsis-1">{{ title }}</div>
      <div v-if="subtitle" class="visual-action-row__subtitle ellipsis-1">
        {{ subtitle }}
      </div>
    </div>
    <div class="visual-action-row__arrow color-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>
