<script setup lang="ts">
/**
 * UiKbd renders keyboard key labels in a monospace, pill-shaped container.
 *
 * This is a thin wrapper around the shadcn-vue {@link Kbd} primitive that adds
 * Aleph Alpha design system defaults and size variants.
 * @component UiKbd
 * @property {'sm' | 'default' | 'lg'} [size='default'] -
 * Controls the visual size of the keyboard key. `sm` renders a compact key,
 * `default` uses the base size, and `lg` renders a larger key.
 * @slot default
 * Content to display inside the keyboard key, typically the key label
 * (for example, ⌘, Enter, or shortcut combinations).
 * @example Basic usage
 * ```vue
 * <template>
 *   <UiKbd>⌘</UiKbd>
 * </template>
 * ```
 * @example Size variants
 * ```vue
 * <template>
 *   <UiKbd size="sm">Esc</UiKbd>
 *   <UiKbd>Enter</UiKbd>
 *   <UiKbd size="lg">Shift</UiKbd>
 * </template>
 * ```
 */
import { Kbd as ShadcnKbd } from '@/components/core/kbd';
import { computed } from 'vue';
import type { UiKbdProps } from './types';

defineOptions({
  name: 'UiKbd',
});

const props = withDefaults(defineProps<UiKbdProps>(), {
  size: 'default',
});

const sizeClasses = computed(() => {
  switch (props.size) {
    case 'sm':
      return 'h-4 px-1 text-[9px]';
    case 'lg':
      return 'h-6 px-2 text-xs';
    default:
      return '';
  }
});
</script>

<template>
  <ShadcnKbd :class="sizeClasses">
    <slot />
  </ShadcnKbd>
</template>
