<script lang="ts">
  import type { Specification } from '$lib'
  import * as Card from '../card'
  import * as Tabs from '../tabs'
  import SpecTable from './SpecTable.svelte'
  import { T } from '@tolgee/svelte'

  const { specifications }: { specifications: Specification[] } = $props()

  let selectedSpec = $state(specifications.at(0)?.title ?? '')
</script>

<Card.Root>
  <Card.Header>
    <T keyName="specs.title" />
  </Card.Header>
  <Card.Content>
    <Tabs.Root bind:value={selectedSpec}>
      <Tabs.List class="w-full">
        {#each specifications as spec (spec.title)}
          <Tabs.Trigger value={spec.title}>
            <T keyName={`specs.tabs.${spec.title}`} />
          </Tabs.Trigger>
        {/each}
      </Tabs.List>
      {#each specifications as spec (spec.title)}
        <Tabs.TabsContent value={spec.title}>
          <SpecTable attributes={spec.attributes} />
        </Tabs.TabsContent>
      {/each}
    </Tabs.Root>
  </Card.Content>
</Card.Root>
