<script setup lang="ts">
import { useViewVisible } from '@/hooks/view-visible';

import type { IconObject } from '@/types';

interface Props {
  title: string;
  descriptionText: string;
  icon: IconObject;
  iconBgColor: string;
}

const { visible, showView, hideView } = useViewVisible();

defineProps<Props>();

defineExpose({
  showView,
  hideView,
});
</script>

<template>
  <div>
    <AModal v-model:open="visible" :title="title" @ok="$emit('confirm')" :centered="true" style="width: 460px">
      <AFlex justify="center" align="center">
        <AFlex justify="center" align="center" class="div-center">
          <AFlex justify="center" align="center" class="icon-background" :style="`background-color:${iconBgColor}`">
            <SvgIcon :name="icon.name" />
          </AFlex>
        </AFlex>
      </AFlex>
      <AFlex justify="center" align="center">
        <span class="description-text">{{ descriptionText }}</span>
      </AFlex>
    </AModal>
  </div>
</template>

<style lang="scss" scoped>
.div-center {
  width: 120px;
  height: 96px;
}

.icon-background {
  width: 96px;
  height: 96px;
  font-size: 42px;
  color: #fff;
  border-radius: 50%;
}

.description-text {
  margin-top: 16px;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  color: #333;
  text-align: center;
}
</style>
