const inputStyle = {
  background: "linear-gradient(135deg, rgba(50, 107, 118, 0.6) 0%, rgba(32, 76, 106, 0.6) 100%)",
  border: "1.5px solid rgba(138, 206, 224, 0.3)",
  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.2)",
};

interface FormInputProps {
  label: string;
  value: string;
  onChange: (value: string) => void;
  placeholder: string;
  multiline?: boolean;
  rows?: number;
}

export function FormInput({ label, value, onChange, placeholder, multiline, rows = 6 }: FormInputProps) {
  return (
    <div>
      <label className="block text-white text-sm font-bold mb-3">{label}</label>
      {multiline ? (
        <textarea
          value={value}
          onChange={(e) => onChange(e.target.value)}
          placeholder={placeholder}
          dir="rtl"
          rows={rows}
          className="w-full px-4 py-3 rounded-2xl text-white text-sm outline-none resize-none"
          style={inputStyle}
        />
      ) : (
        <input
          type="text"
          value={value}
          onChange={(e) => onChange(e.target.value)}
          placeholder={placeholder}
          dir="rtl"
          className="w-full px-4 py-3 rounded-2xl text-white text-sm outline-none"
          style={inputStyle}
        />
      )}
    </div>
  );
}
