<script setup lang="ts">
import {onMounted} from 'vue';
import {useModel} from '../stores/useModel';

const model = useModel();

onMounted(async () => {
  await model.loadModelStatus();
});
</script>

<template>
  <div class="bg-white dark:bg-gray-800 rounded p-4 shadow">
    <h3 class="font-semibold mb-2 text-gray-900 dark:text-white">Model Status</h3>

    <div v-if="model.status === 'loading'" class="text-gray-600 dark:text-gray-400">
      Loading model information...
    </div>

    <div v-else-if="model.status === 'error'" class="text-red-600 dark:text-red-400">
      Error: {{ model.error }}
    </div>

    <div v-else>
      <div class="flex items-center mb-2">
        <span class="font-medium mr-2 text-gray-900 dark:text-white">Name:</span>
        <span class="dark:text-gray-200">{{ model.name }}</span>
      </div>

      <div class="flex items-center">
        <span class="font-medium mr-2 text-gray-900 dark:text-white">Status:</span>
        <span
          :class="{
            'text-green-600 dark:text-green-400': model.status === 'ready',
            'text-red-600 dark:text-red-400': model.status === 'not available'
          }"
        >
          {{ model.status }}
        </span>
      </div>
    </div>
  </div>
</template>
