<script setup lang="ts">
  import { useBadnessVisuals } from '@/hooks/badnessVisualizer'

  const props = defineProps<{
    badness: number
  }>()

  const { hue, filled, empty } = useBadnessVisuals(props.badness)
</script>

<template>
  <div class="provizorniteplomer">
    <div
      class="provizornirtut"
      :style="{
        flexGrow: filled,
        '--hue': hue,
      }"
    />
    <div
      class="provizornivakuum"
      :style="{ flexGrow: empty }"
    />
  </div>
</template>

<style scoped>
  .provizorniteplomer {
  flex-grow: 1;
  display: flex;
  height: 3px;
  background-color: hsl(var(--foreground) / 15%);
  overflow: hidden;
}

.provizornirtut {
  background: hsl(var(--foreground));
  background: linear-gradient(to left, hsl(var(--hue) 80% 60%), hsl(var(--hue) 90% 65% / 70%));
  box-shadow: 1em 0 0.75em hsl(var(--foreground));
}
</style>