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

// Component for fetching all regions of a country
const GetAllCountryRegions = () => {
    // State to hold the regions
    const [regions, setRegions] = useState(null);

    useEffect(() => {
        // Function to fetch regions
        const fetchRegions = async () => {
            try {
                // Replace 'your_api_key' with your actual API key
                const api_key = 'your_api_key';

                // URL for the API endpoint
                const url = 'https://100074.pythonanywhere.com/get-coords-v3/';

                // Parameters to be sent with the request
                const params = { api_key: api_key };

                // Payload for the request
                const payload = {
                    country: 'Italy',  // Specify the country whose regions you want to retrieve
                    query: 'all'       // Specify 'all' to get all regions
                };

                // Sending a POST request to the API endpoint
                const response = await axios.post(url, payload, { params });

                // Set the regions state with the response data
                setRegions(response.data);
            } catch (error) {
                console.error('Error fetching regions:', error);
            }
        };

        // Call the fetchRegions function
        fetchRegions();
    }, []);

    return (
        <div>
            {/* Displaying the regions */}
            {regions && (
                <ul>
                    {regions.map(region => (
                        <li key={region}>{region}</li>
                    ))}
                </ul>
            )}
        </div>
    );
};

export default GetAllCountryRegions;