/**
 * Select (desplegable) con estilo primary del design system (Config Localización, formularios config).
 * 42px altura, borde #38656D, IBM Plex Sans. Soporta label opcional, error (estilo reutilizable), required y overrides por props.
 */
import { FONT_FAMILY_SANS, INPUT_ERROR_TEXT_STYLE, COLOR_INPUT_ERROR } from '../../../designTokens';

export const PrimarySelect = ({
  label = '',
  labelStyle,
  labelClassName = '',
  options = [],
  value,
  onChange,
  placeholder = '',
  disabled = false,
  error = '',
  required = false,
  showRequiredIndicator = true,
  className = '',
  style = {},
  id,
  name,
  ...props
}) => {
  const baseSelectStyle = {
    width: '100%',
    height: '42px',
    paddingTop: '10px',
    paddingRight: '12px',
    paddingBottom: '10px',
    paddingLeft: '12px',
    borderRadius: '8px',
    borderWidth: error ? '2px' : '1px',
    borderStyle: 'solid',
    borderColor: error ? COLOR_INPUT_ERROR : '#38656D',
    backgroundColor: '#FFFFFF',
    fontFamily: FONT_FAMILY_SANS,
    fontWeight: 400,
    fontStyle: 'normal',
    fontSize: '16px',
    lineHeight: '24px',
    letterSpacing: '0px',
    color: 'var(--color-main-800)',
    boxSizing: 'border-box',
    outline: 'none',
    cursor: disabled ? 'not-allowed' : 'pointer',
    ...(disabled && { backgroundColor: '#F3F4F6' }),
    ...style,
  };

  return (
    <div style={{ width: '100%' }}>
      {label && (
        <label
          htmlFor={id}
          className={labelClassName}
          style={{
            display: 'block',
            marginBottom: '8px',
            fontFamily: FONT_FAMILY_SANS,
            fontWeight: 500,
            fontSize: '14px',
            lineHeight: '21px',
            letterSpacing: '0.01em',
            color: 'var(--color-main-800)',
            ...(labelStyle || {}),
          }}
        >
          {label}
          {required && showRequiredIndicator && <span style={{ color: '#000000', marginLeft: '4px' }}>*</span>}
        </label>
      )}
      <select
        id={id}
        name={name}
        value={value ?? ''}
        onChange={onChange}
        disabled={disabled}
        required={required}
        className={className}
        style={baseSelectStyle}
        aria-invalid={!!error}
        aria-describedby={error ? `${id || name || 'select'}-error` : undefined}
        {...props}
      >
        {placeholder && <option value="">{placeholder}</option>}
        {options.map((opt) => (
          <option key={opt.value} value={opt.value}>
            {opt.label}
          </option>
        ))}
      </select>
      {error && (
        <p
          id={id || name ? `${id || name}-error` : undefined}
          style={{
            margin: '4px 0 0',
            ...INPUT_ERROR_TEXT_STYLE,
          }}
        >
          {error}
        </p>
      )}
    </div>
  );
};

export default PrimarySelect;
