import { splitProps, mergeProps, JSX } from 'solid-js';
import clsx from 'clsx';

export type LabelFont = 'mono' | 'display';
export type LabelSize = 'sm' | 'md' | 'lg';

export interface LabelProps extends JSX.LabelHTMLAttributes<HTMLLabelElement> {
  font?: LabelFont;
  size?: LabelSize;
}

/**
 * Label -- monospace or display font label for form elements.
 *
 * Uses `for` attribute (SolidJS uses `for` directly, not htmlFor).
 * Font: mono = Fira Code, display = Share Tech.
 */
export function Label(rawProps: LabelProps) {
  const merged = mergeProps({ font: 'mono' as LabelFont, size: 'md' as LabelSize }, rawProps);
  const [local, rest] = splitProps(merged, ['font', 'size', 'class', 'children']);

  const fontClass = () => (local.font === 'display' ? 'font-display' : 'font-mono');

  const sizeClass = () => {
    switch (local.size) {
      case 'sm': return 'hh-label--sm';
      case 'lg': return 'hh-label--lg';
      default:   return 'hh-label--md';
    }
  };

  return (
    <label
      class={clsx('hh-label', fontClass(), sizeClass(), local.class)}
      {...rest}
    >
      {local.children}
    </label>
  );
}