<template>
  <aside
    class="flex min-h-0 shrink-0 flex-col border-r border-border bg-surface-1"
    :style="{ width: `${ide.leftWidth}px` }"
  >
    <ProjectTree v-if="ide.activeActivity === 'explorer'" />
    <!-- Git / Sessions / Groupes : panneaux dédiés livrés en B6 ; placeholder pour l'instant. -->
    <div v-else class="flex h-full items-center justify-center p-4">
      <EmptyState :icon="placeholder.icon" :title="placeholder.title" :hint="t('ide.comingSoon')" />
    </div>
  </aside>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { Boxes, GitCompare, SquareTerminal } from '@lucide/vue';
import { useIdeStore } from '../../stores/ide';
import ProjectTree from './ProjectTree.vue';
import EmptyState from '../ui/EmptyState.vue';

const { t } = useI18n();
const ide = useIdeStore();

const placeholder = computed(() => {
  switch (ide.activeActivity) {
    case 'git':
      return { icon: GitCompare, title: t('ide.activity.git') };
    case 'sessions':
      return { icon: SquareTerminal, title: t('ide.activity.sessions') };
    default:
      return { icon: Boxes, title: t('ide.activity.groups') };
  }
});
</script>
