
type RuleWeight = 'heavy' | 'mid' | 'light' | 'red';

interface RuleProps {
  weight?: RuleWeight;
  className?: string;
}

const styles: Record<RuleWeight, React.CSSProperties> = {
  heavy: {
    borderTop: '3px solid var(--ink)',
    borderBottom: 'none',
    margin: 0,
    width: '100%',
  },
  mid: {
    borderTop: '1px solid var(--ink)',
    borderBottom: 'none',
    margin: 0,
    width: '100%',
  },
  light: {
    borderTop: '1px solid var(--rule-thin)',
    borderBottom: 'none',
    margin: 0,
    width: '100%',
  },
  red: {
    borderTop: '3px solid var(--red)',
    borderBottom: 'none',
    margin: 0,
    width: '100%',
  },
};

export function Rule({ weight = 'mid', className = '' }: RuleProps) {
  return (
    <hr
      style={styles[weight]}
      className={className}
      aria-hidden="true"
    />
  );
}
