import { Typography } from '../Typography/Typography';
import { FONT_FAMILY_SANS } from '../../../designTokens';

/**
 * Botón de acción principal (ej. Guardar, Aceptar, Descartar) con estilo del design system.
 * variant="primary": relleno #38656D, texto blanco (Guardar).
 * variant="outline": borde #38656D, fondo transparente, texto #38656D (Descartar).
 * 48px altura. Soporta fullWidth (narrow) o ancho según contenido.
 */
export const PrimaryActionButton = ({
  children,
  text = '',
  disabled = false,
  onClick,
  fullWidth = false,
  variant = 'primary',
  className = '',
  style = {},
  textStyle = {},
  type = 'button',
  ...props
}) => {
  const label = children != null ? children : text;
  const isOutline = variant === 'outline';

  return (
    <button
      type={type}
      disabled={disabled}
      onClick={disabled ? undefined : onClick}
      className={className}
      style={{
        width: fullWidth ? '100%' : 'auto',
        minWidth: isOutline ? undefined : '91px',
        height: '48px',
        padding: '12px 16px',
        borderRadius: '8px',
        backgroundColor: disabled ? '#CACACA' : isOutline ? 'transparent' : '#38656D',
        border: disabled ? 'none' : isOutline ? '1px solid #38656D' : 'none',
        boxSizing: 'border-box',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        cursor: disabled ? 'not-allowed' : 'pointer',
        flexShrink: fullWidth ? undefined : 0,
        marginLeft: fullWidth ? undefined : 'auto',
        ...style,
      }}
      {...props}
    >
      {/*
        `component="span"` + flex: evita el `<p>` (caja de línea / half-leading) que descentraba
        icono + texto respecto al botón. Mismo patrón para todo label (solo texto o hijos con icono).
      */}
      <Typography
        component="span"
        variant="body-md"
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          gap: '8px',
          boxSizing: 'border-box',
          margin: 0,
          padding: 0,
          width: '100%',
          minHeight: 0,
          fontFamily: FONT_FAMILY_SANS,
          fontWeight: 400,
          fontStyle: 'normal',
          fontSize: '16px',
          lineHeight: '24px',
          letterSpacing: '0%',
          color: disabled ? '#FFFFFF' : isOutline ? '#38656D' : '#FFFFFF',
          textAlign: 'center',
          ...textStyle,
        }}
      >
        {label}
      </Typography>
    </button>
  );
};

export default PrimaryActionButton;
