<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { KubernetesCluster } from '../types/kubernetes';

export default defineComponent({
  name: 'ClusterList',

  props: {
    clusters: {
      type: Array as PropType<KubernetesCluster[]>,
      required: true,
      default: () => []
    },
    selectedCluster: {
      type: Object as PropType<KubernetesCluster | null>,
      required: false,
      default: null
    }
  },

  methods: {
    isSelected(cluster: KubernetesCluster): boolean {
      return this.selectedCluster?.contextName === cluster.contextName;
    },

    selectCluster(cluster: KubernetesCluster) {
      this.$emit('select-cluster', cluster);
    }
  }
});
</script>

<template>
  <div class="cluster-list">
    <div 
      v-for="cluster in clusters" 
      :key="cluster.server"
      :class="['cluster-item', { active: isSelected(cluster) }]"
      @click="selectCluster(cluster)"
    >
      <i class="fas fa-server"></i>
      {{ cluster.contextName }}
    </div>
  </div>
</template>

<style scoped>
.cluster-list {
  padding: 8px 0;
}

.cluster-item {
  padding: 8px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #cccccc;
}

.cluster-item:hover {
  background-color: #2a2d2e;
}

.cluster-item.active {
  background-color: #37373d;
  color: #ffffff;
}

.cluster-item i {
  width: 16px;
  text-align: center;
  font-size: 14px;
}
</style>