<script setup lang="ts">
import type { DbConfigInfo } from './DbConfigSummary.vue';

defineProps<{
  dbConfig?: DbConfigInfo | null;
  showDefaultBadge?: boolean;
}>();

function formatTablePath(dbConfig: DbConfigInfo, table?: string) {
  const parts: string[] = [];
  if (dbConfig.database) parts.push(dbConfig.database);
  if (dbConfig.schema) parts.push(dbConfig.schema);
  if (table) parts.push(table);
  return parts.join('.') || table || '';
}
</script>

<template>
  <div v-if="dbConfig" class="space-y-1">
    <div class="text-muted-foreground flex items-center gap-1 text-[10px]">
      <span class="font-medium">{{ dbConfig.dbName }}</span>
      <span
        v-if="showDefaultBadge && dbConfig.dbName === 'default'"
        class="rounded bg-amber-100 px-1 text-amber-700 dark:bg-amber-950 dark:text-amber-300"
      >
        {{ $t('ai-platform.workflow.editor.dbConnection.defaultBadge') }}
      </span>
    </div>
    <div
      v-if="dbConfig.database || dbConfig.schema"
      class="text-muted-foreground truncate font-mono text-[10px]"
    >
      {{ formatTablePath(dbConfig) }}
    </div>
  </div>
</template>
