import React from 'react';
import { 
  FormControl, 
  FormLabel, 
  Input, 
  FormHelperText, 
  FormErrorMessage 
} from '@chakra-ui/react';

// Red Hat brand colors
const colors = {
  blue: "#0066cc",
  blueHover: "#004080", 
  blueActive: "#002952",
  gray: {
    light: "#f5f5f5",
    medium: "#d2d2d2",
    dark: "#4c4c4c"
  }
};

interface RedHatStyledInputProps {
  label?: string;
  value: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  placeholder?: string;
  name: string;
  id?: string;
  type?: string;
  isDisabled?: boolean;
  isRequired?: boolean;
  className?: string;
  helperText?: string;
  error?: string;
}

const RedHatStyledInput: React.FC<RedHatStyledInputProps> = ({
  label,
  value,
  onChange,
  placeholder = '',
  name,
  id,
  type = 'text',
  isDisabled = false,
  isRequired = false,
  className = '',
  helperText = '',
  error = '',
  ...props
}) => {
  const inputId = id || `input-${name}`;
  const hasError = error !== '';

  return (
    <FormControl isInvalid={hasError} isRequired={isRequired} isDisabled={isDisabled}>
      {label && (
        <FormLabel 
          htmlFor={inputId}
          fontFamily="'Red Hat Display', sans-serif"
          fontWeight="500"
          mb={1}
        >
          {label}
        </FormLabel>
      )}
      
      <Input
        id={inputId}
        name={name}
        value={value}
        onChange={onChange}
        placeholder={placeholder}
        type={type}
        borderColor={colors.gray.medium}
        _hover={{ borderColor: colors.blue }}
        _focus={{ borderColor: colors.blue, boxShadow: `0 0 0 1px ${colors.blue}` }}
        fontFamily="'Red Hat Text', sans-serif"
        borderRadius="3px"
        className={className}
        {...props}
      />
      
      {helperText && !hasError && (
        <FormHelperText 
          fontSize="sm" 
          color={colors.gray.dark}
          fontFamily="'Red Hat Text', sans-serif"
        >
          {helperText}
        </FormHelperText>
      )}
      
      {hasError && (
        <FormErrorMessage 
          fontSize="sm"
          fontFamily="'Red Hat Text', sans-serif"
        >
          {error}
        </FormErrorMessage>
      )}
    </FormControl>
  );
};

export default RedHatStyledInput;