<script setup lang="ts">
import { ElAlert } from 'element-plus';

export interface DbConfigInfo {
  database?: string;
  dbName: string;
  dbType: string;
  schema?: string;
}

defineProps<{
  dbConfig?: DbConfigInfo | null;
  showDefaultWriteWarning?: boolean;
}>();
</script>

<template>
  <div v-if="dbConfig" class="space-y-2">
    <div class="bg-muted rounded px-3 py-2">
      <div class="text-muted-foreground text-xs">
        <span class="text-foreground font-medium">{{ dbConfig.dbName }}</span>
        <span v-if="dbConfig.database"> · {{ dbConfig.database }}</span>
        <span v-if="dbConfig.schema">.{{ dbConfig.schema }}</span>
        <span class="ml-2">({{ dbConfig.dbType }})</span>
      </div>
    </div>
    <ElAlert
      v-if="showDefaultWriteWarning && dbConfig.dbName === 'default'"
      type="warning"
      :closable="false"
      show-icon
    >
      <template #title>
        <span class="text-xs">{{
          $t('ai-platform.workflow.editor.dbConnection.defaultWriteWarning')
        }}</span>
      </template>
    </ElAlert>
  </div>
</template>
