<template>
  <div>
    <TUIEmojiPluginDetail
      v-if="props.type === 'reaction-detail'"
      :message="props.message"
      :emojiConfig="props.emojiConfig"
    />
    <TUIEmojiPluginAction
      v-else
      :message="props.message"
      :emojiConfig="props.emojiConfig"
    />
  </div>
</template>
<script lang="ts">
import {
  IMessageModel,
} from '@tencentcloud/chat-uikit-engine-lite';
import TUIEmojiPluginDetail from './emoji-detail/index.vue';
import TUIEmojiPluginAction from './emoji-action/index.vue';

interface IEmojiReactionProps {
  message: IMessageModel;
  type?: string;
  emojiConfig: Record<string, any>;
}

export default {
  components: {
    TUIEmojiPluginDetail,
    TUIEmojiPluginAction,
  },
  props: {
    message: {
      type: Object as () => IMessageModel,
      default: () => ({}),
    },
    type: {
      type: String,
      default: '',
    },
    emojiConfig: {
      type: Object as () => Record<string, any>,
      default: () => ({}),
    },
  },
  setup(props: IEmojiReactionProps) {
    return {
      props,
    };
  },
};
</script>
