'use client';

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

type Variant = 'primary' | 'outline' | 'ghost' | 'amber' | 'danger';

type VBtnProps = {
  children: ReactNode;
  variant?: Variant;
  onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
  small?: boolean;
  style?: CSSProperties;
  type?: 'button' | 'submit' | 'reset';
  disabled?: boolean;
};

const VARIANTS: Record<Variant, CSSProperties> = {
  primary: { background: 'var(--g-a)', color: '#04140f', borderColor: 'var(--g-a)' },
  outline: { background: 'transparent', color: 'var(--text-0)', borderColor: 'var(--border-hi)' },
  ghost: { background: 'transparent', color: 'var(--text-1)', borderColor: 'transparent' },
  amber: { background: 'transparent', color: 'var(--amber)', borderColor: 'var(--amber)' },
  danger: { background: 'transparent', color: 'var(--miss)', borderColor: 'var(--miss)' },
};

/** Button (§5). primary = grade-green filled. Inter, never glitches. */
export default function VBtn({
  children,
  variant = 'primary',
  onClick,
  small = false,
  style = {},
  type = 'button',
  disabled = false,
}: VBtnProps) {
  const base: CSSProperties = {
    fontFamily: 'var(--sans)',
    fontWeight: 700,
    fontSize: small ? 12.5 : 14,
    padding: small ? '8px 14px' : '11px 20px',
    borderRadius: 6,
    cursor: disabled ? 'not-allowed' : 'pointer',
    border: '1px solid transparent',
    transition: 'all .15s',
    letterSpacing: '0.01em',
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 8,
    whiteSpace: 'nowrap',
    opacity: disabled ? 0.45 : 1,
  };
  return (
    <button
      type={type}
      disabled={disabled}
      onClick={onClick}
      /* full-size CTAs meet the 44px mobile touch target (globals.css M1);
         dense `small` buttons keep their compact size (density is a feature). */
      className={small ? undefined : 'vbtn'}
      style={{ ...base, ...VARIANTS[variant], ...style }}
      onMouseEnter={(e) => {
        if (variant === 'outline') e.currentTarget.style.borderColor = 'var(--g-a)';
      }}
      onMouseLeave={(e) => {
        if (variant === 'outline') e.currentTarget.style.borderColor = 'var(--border-hi)';
      }}
    >
      {children}
    </button>
  );
}
