import { useState, useEffect } from 'react';
import axios from 'axios';

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios.get('https://api.example.com/users')
      .then(response => {
        setUsers(response.data);
        setLoading(false);
      })
      .catch(error => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json'
  }
});

const fetchData = async () => {
  try {
    const response = await api.get('/users');
    setUsers(response.data);
  } catch (error) {
    setError(error.message);
  } finally {
    setLoading(false);
  }
};

const handleSubmit = async (formData) => {
  try {
    const response = await api.post('/users', formData);
    console.log('Success:', response.data);
  } catch (error) {
    if (error.response) {
      // Server responded with non-2xx status
      console.error('Server Error:', error.response.data);
    } else if (error.request) {
      // Request made but no response received
      console.error('Network Error');
    } else {
      // Something else went wrong
      console.error('Error:', error.message);
    }
  }
};

// Request interceptor
api.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

// Response interceptor
api.interceptors.response.use(response => {
  return response;
}, error => {
  if (error.response.status === 401) {
    // Handle unauthorized access
    window.location.href = '/login';
  }
  return Promise.reject(error);
});