import type { CSSProperties, ReactNode } from 'react';

type SectionHeadProps = {
  children: ReactNode;
  /** Label color token (default muted text). */
  accent?: string;
  style?: CSSProperties;
};

/**
 * All-caps 11px mono section label with a one-shot glitch tear on hover (§5).
 * Chrome — glitches; never wrap data in this.
 */
export default function SectionHead({ children, accent = 'var(--text-1)', style = {} }: SectionHeadProps) {
  return (
    <div
      className="label glitch-hover"
      style={{
        color: accent,
        fontSize: 11,
        fontWeight: 700,
        cursor: 'default',
        display: 'inline-flex',
        alignItems: 'center',
        gap: 7,
        ...style,
      }}
    >
      {children}
    </div>
  );
}
