<script setup lang="ts">
import { computed } from 'vue'
import type { VersionSet } from '../../contracts/versionSet'
import EvidenceVersionSet from '../EvidenceVersionSet.vue'
const props = defineProps<{
  title: string; asOf: string; datasetId: string; dataHash: string; modelVersion: string; configVersion: string;
  codeSha: string; contractVersion: string; projectionVersion: string; watermark: string;
  stale?: boolean; correlationId?: string
}>()
const versionSet = computed<VersionSet>(() => ({
  datasetId: props.datasetId,
  dataHash: props.dataHash,
  modelVersion: props.modelVersion,
  configVersion: props.configVersion,
  codeSha: props.codeSha,
  contractVersion: props.contractVersion
}))
</script>
<template>
  <header class="ks-data-context" :data-stale="stale || undefined">
    <div><h1>{{ title }}</h1><p>As-of {{ asOf }} <strong v-if="stale" role="status" aria-label="Data is stale">STALE</strong></p></div>
    <EvidenceVersionSet :value="versionSet" compact />
    <dl>
      <dt>Projection</dt><dd>{{ projectionVersion }}</dd>
      <dt>Watermark</dt><dd>{{ watermark }}</dd>
      <template v-if="correlationId"><dt>Correlation</dt><dd>{{ correlationId }}</dd></template>
    </dl>
  </header>
</template>
<style scoped>
.ks-data-context{display:grid;gap:var(--ks-space-3);padding:var(--ks-space-4);border:1px solid var(--ks-color-neutral-300);border-radius:var(--ks-radius-md)}
.ks-data-context[data-stale=true]{border-color:var(--ks-color-warning-500)} h1,p{margin:0} dl{display:flex;gap:var(--ks-space-3);margin:0;flex-wrap:wrap} dt{font-weight:700} dd{margin:0}
</style>
