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

const PPPComponent = () => {
    const [result, setResult] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const api_key = 'your_api_key_here';  // Replace 'your_api_key_here' with your actual API key
                const url = `https://100088.pythonanywhere.com/api/v1/ppp/public/${api_key}`;  // Construct the API request URL

                const data = {  // Prepare the data in object format
                    "base_currency": "United States dollar",
                    "base_price": "100",
                    "base_country": "Germany",
                    "target_country": "United States",
                    "target_currency": "British pound"
                };

                const response = await axios.post(url, data);  // Send a POST request to the API endpoint with the data
                setResult(response.data);  // Set the response data to the 'result' state
            } catch (error) {
                console.error('Error fetching PPP data:', error);
            }
        };

        fetchData();
    }, []);

    return (
        <div>
            <h2>PPP API Response:</h2>
            <pre>{JSON.stringify(result, null, 2)}</pre>  {/* Display the result in a readable JSON format */}
        </div>
    );
};

export default PPPComponent;