<!-- #region ReviewWorkspaceHeader [C:2] [TYPE Component] [SEMANTICS dataset-review, header, badges, state] -->
<!-- @BRIEF Header section for the dataset review workspace with title, description, and status badges. -->
<!-- @LAYER UI -->
<script lang="ts">
  import { t } from "$lib/i18n/index.svelte.js";

  let { session, currentWorkspaceState, readinessLabel, getWorkspaceStateLabel, profile } = $props();
</script>

<div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
  <div>
    <p class="text-xs font-semibold uppercase tracking-[0.2em] text-blue-700">
      {$t.dataset_review?.workspace?.eyebrow}
    </p>
    <h1 class="text-2xl font-bold text-slate-900">
      {$t.dataset_review?.workspace?.title}
    </h1>
    <p class="mt-1 max-w-4xl text-sm text-slate-600">
      {$t.dataset_review?.workspace?.description}
    </p>
  </div>

  <div class="flex flex-wrap items-center gap-2">
    {#if session}
      <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-700">
        {session.source_kind || $t.dataset_review?.workspace?.source_badge_fallback}
      </span>
      <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-700">
        {profile?.dataset_name || session.dataset_ref}
      </span>
    {/if}
    <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-700">
      {$t.dataset_review?.workspace?.state_label}: {getWorkspaceStateLabel(currentWorkspaceState)}
    </span>
    {#if session}
      <span class="rounded-full bg-primary-light px-3 py-1 text-xs font-medium text-blue-700">
        {$t.dataset_review?.workspace?.readiness_label}: {readinessLabel}
      </span>
    {/if}
  </div>
</div>
<!-- #endregion ReviewWorkspaceHeader -->
