import React from 'react';
import { inject } from '../lib/inject';

const css = `
.nbl-btn{font-family:var(--font-sans);font-weight:var(--weight-semibold);display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;white-space:nowrap;text-decoration:none;line-height:1;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard);}
.nbl-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus);}
.nbl-btn[disabled]{cursor:not-allowed;opacity:.5;}
.nbl-btn--sm{height:32px;padding:0 12px;font-size:var(--text-sm);}
.nbl-btn--md{height:40px;padding:0 16px;font-size:var(--text-base);}
.nbl-btn--lg{height:48px;padding:0 22px;font-size:var(--text-md);}
.nbl-btn--block{width:100%;}
.nbl-btn__icon{display:inline-flex;flex:none;}
.nbl-btn--primary{background:var(--color-primary);color:var(--text-on-primary);}
.nbl-btn--primary:hover:not([disabled]){background:var(--color-primary-hover);}
.nbl-btn--primary:active:not([disabled]){background:var(--color-primary-active);transform:translateY(1px);}
.nbl-btn--secondary{background:var(--surface-card);color:var(--text-strong);border-color:var(--border-strong);}
.nbl-btn--secondary:hover:not([disabled]){background:var(--surface-hover);border-color:var(--steel-400);}
.nbl-btn--secondary:active:not([disabled]){background:var(--surface-sunken);transform:translateY(1px);}
.nbl-btn--ghost{background:transparent;color:var(--text-body);}
.nbl-btn--ghost:hover:not([disabled]){background:var(--surface-sunken);color:var(--text-strong);}
.nbl-btn--ghost:active:not([disabled]){background:var(--steel-200);}
.nbl-btn--danger{background:var(--red-600);color:#fff;}
.nbl-btn--danger:hover:not([disabled]){background:var(--red-700);}
.nbl-btn--danger:active:not([disabled]){transform:translateY(1px);}
.nbl-btn--accent{background:var(--color-accent);color:var(--steel-900);}
.nbl-btn--accent:hover:not([disabled]){background:var(--color-accent-hover);}
.nbl-btn--accent:active:not([disabled]){transform:translateY(1px);}
`;

inject('nbl-btn-css', css);

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'accent';
  size?: 'sm' | 'md' | 'lg';
  leftIcon?: React.ReactNode;
  rightIcon?: React.ReactNode;
  fullWidth?: boolean;
  loading?: boolean;
}

export function Button({
  children,
  variant = 'primary',
  size = 'md',
  leftIcon,
  rightIcon,
  fullWidth = false,
  loading = false,
  disabled,
  className = '',
  ...rest
}: ButtonProps) {
  inject('nbl-btn-css', css);
  const cls = ['nbl-btn', `nbl-btn--${variant}`, `nbl-btn--${size}`, fullWidth ? 'nbl-btn--block' : '', className]
    .filter(Boolean)
    .join(' ');
  return (
    <button className={cls} disabled={disabled || loading} {...rest}>
      {leftIcon ? <span className="nbl-btn__icon">{leftIcon}</span> : null}
      {children}
      {rightIcon ? <span className="nbl-btn__icon">{rightIcon}</span> : null}
    </button>
  );
}