<template>
  <v-chip
    :color="statusColor"
    :size="size"
    variant="flat"
    class="font-weight-medium"
  >
    {{ status }}
  </v-chip>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { BerthStatus } from '@/utils/types';

interface Props {
  status: string;
  size?: 'x-small' | 'small' | 'default' | 'large' | 'x-large';
}

const props = withDefaults(defineProps<Props>(), {
  size: 'small'
});

const statusColor = computed(() => {
  switch (props.status) {
    case BerthStatus.Available:
      return 'success'; // Green
    case BerthStatus.Waitlist:
      return 'primary'; // Blue
    case BerthStatus.Reserved:
      return 'warning'; // Orange
    case BerthStatus.Sold:
      return 'error'; // Red
    default:
      return 'grey';
  }
});
</script>

<style scoped>
/* Additional styling if needed */
</style>
