// AI-generated Button.jsx
import React from 'react';
import PropTypes from 'prop-types';

const Button = ({ variant = 'primary', children, ...props }) => {
  const baseStyles = 'px-4 py-2 rounded-md font-semibold transition-colors duration-200';
  let variantStyles = '';

  switch (variant) {
    case 'primary':
      variantStyles = 'bg-color-brand-primary text-color-text-light hover:bg-color-brand-primary-dark';
      break;
    case 'secondary':
      variantStyles = 'bg-color-brand-secondary text-color-text-light hover:bg-color-brand-secondary-dark';
      break;
    case 'ghost':
      variantStyles = 'bg-color-background-ghost text-color-text-light hover:bg-gray-200';
      break;
    default:
      variantStyles = 'bg-color-brand-primary text-color-text-light hover:bg-color-brand-primary-dark';
  }

  return (
    <button className={`${baseStyles} ${variantStyles}`} {...props}>
      {children}
    </button>
  );
};

Button.propTypes = {
  variant: PropTypes.oneOf(['primary', 'secondary', 'ghost']),
  children: PropTypes.node.isRequired,
};

export default Button;

// AI-generated FormInput.jsx
import React from 'react';
import PropTypes from 'prop-types';

const FormInput = ({ label, id, value, onChange, isInvalid, errorMessage, ...props }) => {
  const inputBorderColor = isInvalid ? 'border-color-border-error' : 'border-color-border-default';
  const errorTextColor = 'text-color-text-error';

  return (
    <div className="mb-spacing-sm">
      <label htmlFor={id} className="block text-sm font-medium text-gray-700 mb-1">
        {label}
      </label>
      <input
        type="text"
        id={id}
        value={value}
        onChange={onChange}
        className={`block w-full px-3 py-2 border ${inputBorderColor} rounded-border-radius-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm`}
        {...props}
      />
      {isInvalid && (
        <p className={`mt-1 text-sm ${errorTextColor}`}>
          {errorMessage}
        </p>
      )}
    </div>
  );
};

FormInput.propTypes = {
  label: PropTypes.string.isRequired,
  id: PropTypes.string.isRequired,
  value: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
  isInvalid: PropTypes.bool,
  errorMessage: PropTypes.string,
};

export default FormInput;