<script setup lang="ts">
import { reactive } from 'vue'
import { Toast } from '../index'

import CButton from '../../CButton/CButton.vue'

const topToastItem = reactive<Toast>({
  message:
    '表示テスト用表示テスト用表示テスト用表示テスト用表示テスト用表示テスト用表示テスト用表示テスト用',
  duration: 10000,
  position: 'top',
  id: 1,
  icon: 'info',
})
const bottomToastItem = reactive<Toast>({
  message: '<div>てsつお</div><div>テスト</div>',
  duration: 10000,
  position: 'bottom',
  id: 1,
  icon: 'info',
})

const showToast = (toastItem: Toast) => {
  window.addToast(
    toastItem.message,
    toastItem.duration ? toastItem.duration : 0,
    toastItem.position
  )
}
</script>

<template>
  <div
    style="width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center"
  >
    <CButton @click="showToast(topToastItem)">↑</CButton>
    <CButton @click="() => showToast(bottomToastItem)">↓</CButton>
  </div>
</template>
