import React from 'react';

type FieldType = 'text' | 'email' | 'tel' | 'number' | 'textarea';

interface FormFieldProps {
  type: FieldType;
  placeholder?: string;
  value?: string;
  onChange?: (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
  ) => void;
  name?: string;
}

const FormField: React.FC<FormFieldProps> = ({
  type,
  placeholder,
  value,
  onChange,
  name,
}) => {
  const commonClass =
    'w-full rounded-lg border border-gray-300 p-3 focus:ring-2 focus:ring-red-500 focus:outline-none';

  if (type === 'textarea') {
    return (
      <textarea
        name={name}
        placeholder={placeholder}
        value={value}
        onChange={onChange}
        className={`h-32 resize-none ${commonClass}`}
      />
    );
  }

  return (
    <input
      type={type}
      name={name}
      placeholder={placeholder}
      value={value}
      onChange={onChange}
      className={commonClass}
    />
  );
};

export default FormField;