<script setup lang="ts">
/**
 * Tabs — horizontal tab bar. variant="pill" fills active tab with accent-soft;
 * variant="line" underlines with accent. Items can be bare strings or TabItem objects.
 */
import Icon from '@/components/ds/core/Icon.vue'

export interface TabItem {
  value: string
  label: string
  icon?: string
  count?: number | string
}

const props = withDefaults(
  defineProps<{
    items: (string | TabItem)[]
    variant?: 'pill' | 'line'
    class?: string
  }>(),
  { variant: 'pill' },
)

const model = defineModel<string>({ required: true })

function normalise(it: string | TabItem): TabItem {
  return typeof it === 'string' ? { value: it, label: it } : it
}
</script>

<template>
  <div
    :class="['cc-tabs', `cc-tabs--${variant}`, props.class]"
    role="tablist"
  >
    <button
      v-for="raw in items"
      :key="normalise(raw).value"
      type="button"
      role="tab"
      :aria-selected="normalise(raw).value === model"
      class="cc-tab"
      @click="model = normalise(raw).value"
    >
      <Icon v-if="normalise(raw).icon" :name="normalise(raw).icon ?? ''" :size="15" />
      {{ normalise(raw).label }}
      <span v-if="normalise(raw).count != null" class="cc-tab__count">{{ normalise(raw).count }}</span>
    </button>
  </div>
</template>

<style>
.cc-tabs { display:flex; align-items:center; gap:2px; position:relative; }
.cc-tabs--line { box-shadow: inset 0 -1px 0 var(--border-subtle); gap:4px; }
.cc-tab {
  display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 11px; border:0; background:transparent;
  font-family:var(--font-sans); font-size:var(--text-sm); font-weight:500; color:var(--text-tertiary);
  cursor:pointer; border-radius:var(--radius-sm); transition:var(--transition-colors); white-space:nowrap; position:relative;
}
.cc-tab:hover { color:var(--text-primary); background:var(--surface-hover); }
.cc-tabs--pill .cc-tab[aria-selected="true"] { color:var(--accent-text); background:var(--accent-soft); }
.cc-tabs--line .cc-tab { border-radius:0; height:38px; padding:0 4px; margin:0 7px; }
.cc-tabs--line .cc-tab:hover { background:transparent; }
.cc-tabs--line .cc-tab[aria-selected="true"] { color:var(--text-primary); box-shadow: inset 0 -2px 0 var(--accent); }
.cc-tab__count { font-family:var(--font-mono); font-size:11px; padding:1px 6px; border-radius:var(--radius-pill); background:var(--surface-active); color:var(--text-tertiary); }
.cc-tab[aria-selected="true"] .cc-tab__count { background:var(--accent-soft); color:var(--accent-text); }
</style>
