<template>
  <div class="vtj-panel">
    <div class="vtj-panel__header-wrapper">
      <i
        v-if="props.back"
        @click.stop="handleClickBack"
        class="vtj-panel__back vtj-icon-arrow-left"></i>

      <div v-if="title !== null" class="vtj-panel__header">
        <slot name="title">
          <div class="vtj-panel__title">
            <i v-if="icon" class="vtj-panel__icon" :class="icon"></i>
            {{ title }}
            <span v-if="subtitle" class="vtj-panel__subtitle">
              {{ subtitle }}
            </span>
          </div>
        </slot>
        <div
          v-if="(tools && tools.length) || $slots.tools"
          class="vtj-panel__tools">
          <i
            v-for="item in tools"
            :key="item.name"
            :class="item.icon"
            @click="onToolClick(item)"></i>
          <slot name="tools"></slot>
        </div>
      </div>
    </div>
    <div class="vtj-panel__body" :class="{ 'is-padding': props.bodyPadding }">
      <slot></slot>
    </div>
    <div class="vtj-panel__footer" v-if="$slots.footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>
<script lang="ts" setup>
export interface ToolItem {
  icon: string;
  name: string;
}

export interface Props {
  icon?: string;
  title?: string | null;
  subtitle?: string;
  tools?: ToolItem[];
  bodyPadding?: boolean;
  back?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  bodyPadding: true
});

const emit = defineEmits<{
  (e: 'tool-click', item: ToolItem): void;
  (e: 'back'): void;
}>();

function onToolClick(item: ToolItem) {
  emit('tool-click', item);
}

function handleClickBack() {
  emit('back');
}
</script>
