<script setup lang="ts">
/**
 * GameSwitcher — segmented control for switching the active game context.
 * Set `data-game` on a root shell element to the chosen key so the global
 * [data-game] CSS custom properties re-skin the entire panel.
 * Per-game accent comes from var(--accent) which is resolved by the [data-game] token scope.
 */
import Icon from '@/components/ds/core/Icon.vue'

export interface GameOption {
  key: string
  label: string
  icon?: string
}

const props = withDefaults(
  defineProps<{
    games: (string | GameOption)[]
    showLabels?: boolean
    class?: string
  }>(),
  { showLabels: true },
)

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

function normalise(g: string | GameOption): GameOption {
  return typeof g === 'string' ? { key: g, label: g } : g
}
</script>

<template>
  <div :class="['cc-gameswitch', props.class]" role="group">
    <button
      v-for="raw in games"
      :key="normalise(raw).key"
      type="button"
      :aria-pressed="normalise(raw).key === model"
      :data-game="normalise(raw).key"
      class="cc-gameswitch__opt"
      :title="normalise(raw).label"
      @click="model = normalise(raw).key"
    >
      <Icon
        v-if="normalise(raw).icon"
        :name="normalise(raw).icon ?? ''"
        :size="14"
        :stroke-width="2.25"
        :style="{ color: normalise(raw).key === model ? 'var(--accent)' : 'inherit' }"
      />
      <span
        v-else
        class="cc-gameswitch__dot"
        :style="{ background: normalise(raw).key === model ? 'var(--accent)' : 'var(--text-muted)' }"
      />
      <span v-if="showLabels">{{ normalise(raw).label }}</span>
    </button>
  </div>
</template>

<style>
.cc-gameswitch { display:inline-flex; align-items:center; gap:3px; padding:3px; background:var(--surface-inset); border-radius:var(--radius-md); box-shadow:var(--ring-default); }
.cc-gameswitch__opt {
  display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 11px; border:0; background:transparent;
  font-family:var(--font-sans); font-size:var(--text-xs); font-weight:600; color:var(--text-tertiary);
  border-radius:var(--radius-sm); cursor:pointer; transition:var(--transition-colors); white-space:nowrap;
}
.cc-gameswitch__opt:hover { color:var(--text-primary); }
.cc-gameswitch__dot { width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none; }
.cc-gameswitch__opt[aria-pressed="true"] { background:var(--surface-raised-2); color:var(--text-primary); box-shadow:var(--ring-default); }
</style>
