<template>
  <el-button :icon="InfoFilled" circle size="small" text type="info" class="help-button" @click="visible = true" />
  <el-dialog v-model="visible" :title="title" width="min(680px, 92vw)" append-to-body destroy-on-close>
    <div class="help-content" v-html="content" />
  </el-dialog>
</template>

<script setup lang="ts">
import { InfoFilled } from '@element-plus/icons-vue';

defineProps<{
  title: string;
  content: string;
}>();

const visible = ref(false);
</script>

<style scoped>
.help-button {
  flex-shrink: 0;
}

.help-content {
  line-height: 1.8;
  font-size: 14px;
  color: #334155;
}

.help-content :deep(h3) {
  margin: 16px 0 8px;
  font-size: 15px;
  color: #1f2937;
}

.help-content :deep(p) {
  margin: 6px 0;
  text-indent: 2em;
}

.help-content :deep(ul) {
  margin: 6px 0;
  padding-left: 2em;
}

.help-content :deep(li) {
  margin: 4px 0;
}
</style>
