<script setup lang="ts">
import { formatIsk } from '@/formaters';
import { computed, ref } from 'vue';

const tornadosDPS = 24000;
const tornadosCost = 100000000;

const fitCost = ref(0);
const fitEHP = ref(0);

const haulableValue = computed(() => formatIsk(Math.ceil((fitEHP.value * 1000) / tornadosDPS) * tornadosCost - (fitCost.value * 1000000)));

</script>

<template>
    <span class="font-bold text-lg">Haulable Value</span>
    <div class="grid grid-cols-3 mb-2 mt-2">
        <div class="flex">
            <span>Cost (million ISK): </span>
            <input type="number" class="flex-auto ms-1 me-2" step="1" v-model="fitCost" />
        </div>
        <div class="flex ms-2">
            <span>EHP (thousand EHP): </span>
            <input type="number" class="flex-auto ms-1 me-2" step="1" v-model="fitEHP" />
        </div>
        <div class="ms-2">
            <span>Haulable Value: </span>
            <span>{{ haulableValue }}</span>
        </div>
    </div>
</template>