<template>
  <div class="deployment-details" v-if="selectedResource">
    <div class="details-header">
      <span class="details-icon">🚀</span>
      <span class="details-name">{{ selectedResource.metadata.name }}</span>
    </div>
    <div class="details-content">
      <div class="details-row">
        <span class="label">Name:</span>
        <span class="value">{{ selectedResource.metadata.name }}</span>
      </div>
      <div class="details-row">
        <span class="label">Namespace:</span>
        <span class="value">{{ selectedResource.metadata.namespace }}</span>
      </div>
      <div class="details-row">
        <span class="label">Replicas:</span>
        <span class="value">{{ selectedResource.spec.replicas }}</span>
      </div>
      <div class="details-row">
        <span class="label">Strategy:</span>
        <span class="value">{{ selectedResource.spec.strategy?.type }}</span>
      </div>
      <div class="details-row">
        <span class="label">Created:</span>
        <span class="value">{{ formatDateTime(selectedResource.metadata.creationTimestamp) }}</span>
      </div>
    </div>
  </div>
</template>

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

export default defineComponent({
  name: 'DeploymentDetails',

  props: {
    selectedResource: {
      type: Object as PropType<KubernetesDeployment | null>,
      required: false,
      default: null
    }
  },

  methods: {
    formatDateTime(timestamp: string): string {
      return new Date(timestamp).toLocaleString();
    }
  }
});
</script>

<style scoped>
.deployment-details {
  padding: 16px;
  height: 100%;
  overflow-y: auto;
  background-color: #1e1e1e;
}

.details-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.details-icon {
  font-size: 20px;
}

.details-name {
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
}

.details-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 8px;
}

.details-row {
  display: flex;
  gap: 8px;
}

.details-row .label {
  color: #858585;
  min-width: 100px;
}

.details-row .value {
  color: #cccccc;
}
</style>