<!-- #region GitOperationsPanel [C:2] [TYPE Component] [SEMANTICS git, operations, pull, push, deploy] -->
<!-- @BRIEF Git server operations panel: pull, push, and deploy actions. -->
<!-- @LAYER UI -->
<script lang="ts">
  import { t } from "$lib/i18n/index.svelte.js";
  import { Button } from "$lib/ui";

  let {
    isPulling,
    isPushing,
    workspaceStatus,
    currentEnvStage,
    onPull,
    onPush,
    onDeploy,
  } = $props();
</script>

<div class="grid grid-cols-1 gap-3 md:grid-cols-3">
  <Button
    variant="ghost"
    onclick={onPull}
    disabled={isPulling}
    isLoading={isPulling}
    class="border border-gray-200"
  >
    ⬇ Pull
  </Button>
  <Button
    variant="ghost"
    onclick={onPush}
    disabled={isPushing}
    isLoading={isPushing}
    class="border border-gray-200"
  >
    ⬆ Push{#if workspaceStatus?.ahead_count > 0} ({workspaceStatus.ahead_count}){/if}
  </Button>
  <Button
    variant="primary"
    onclick={onDeploy}
    class={`w-full ${currentEnvStage === 'PROD' ? 'bg-destructive hover:bg-destructive-hover focus-visible:ring-red-500' : 'bg-green-600 hover:bg-green-700 focus-visible:ring-green-500'}`}
  >
    🚀 Deploy
  </Button>
</div>
<!-- #endregion GitOperationsPanel -->
