<template>
  <span class="flex items-center gap-2 text-xs">
    <span class="flex items-center gap-1 font-mono text-zinc-300">
      <GitBranch :size="13" />{{ branch ?? t('worktrees.detached') }}
    </span>
    <span v-if="git.ahead" class="text-emerald-400" :title="t('git.ahead')">↑{{ git.ahead }}</span>
    <span v-if="git.behind" class="text-amber-400" :title="t('git.behind')">↓{{ git.behind }}</span>
    <span v-if="git.stagedCount" class="text-emerald-400" :title="t('git.staged')">●{{ git.stagedCount }}</span>
    <span v-if="git.unstagedCount" class="text-amber-400" :title="t('git.unstaged')">○{{ git.unstagedCount }}</span>
    <span v-if="git.conflictCount" class="text-rose-400" :title="t('git.conflicts')">⚠{{ git.conflictCount }}</span>
    <span v-if="isClean" class="text-zinc-600">{{ t('worktrees.clean') }}</span>
  </span>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { GitBranch } from '@lucide/vue';
import type { WorktreeGitStatus } from '@arboretum/shared';

const props = defineProps<{ git: WorktreeGitStatus; branch: string | null }>();
const { t } = useI18n();

const isClean = computed(
  () => !props.git.dirtyCount && !props.git.ahead && !props.git.behind && !props.git.stagedCount && !props.git.unstagedCount,
);
</script>
