<script lang="ts">
  import type { CapacityProductVariation } from '$lib'
  import { T } from '@tolgee/svelte'
  import { ToggleButton } from '../button'
  import { Label } from '../label'

  const { variations }: { variations: CapacityProductVariation[] } = $props()

  let selectedVariation = $state('')
</script>

<div class="mb-6">
  <Label class="mb-3">
    <T keyName="capacity.title" />
  </Label>
  <div class="flex flex-row gap-2">
    {#each variations as variation (variation.numericValue)}
      <ToggleButton
        onclick={() => (selectedVariation = variation.name)}
        selected={selectedVariation === variation.name}
      >
        {variation.name}
      </ToggleButton>
    {/each}
  </div>
</div>
