<script lang="ts">
  import { invoke } from "@tauri-apps/api/core";
  import { onMount } from "svelte";

  let version = $state("Loading...");

  async function fetchVersion() {
    try {
      const result = await invoke<string>("get_claude_version");
      version = result;
    } catch (error) {
      console.error("Failed to get Claude CLI version:", error);
      version = "Unknown";
    }
  }

  onMount(() => {
    fetchVersion();
  });
</script>

<div class="cli-version">
  <svg
    class="terminal-icon"
    width="14"
    height="14"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  >
    <polyline points="4 17 10 11 4 5" />
    <line x1="12" y1="19" x2="20" y2="19" />
  </svg>
  <span class="version-text">CLI {version}</span>
</div>

<style>
  .cli-version {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-family: var(--font-mono, monospace);
    transition: all 0.2s;
  }

  .cli-version:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
  }

  .terminal-icon {
    flex-shrink: 0;
    opacity: 0.7;
  }

  .version-text {
    white-space: nowrap;
  }
</style>
