import React, { useEffect } from 'react';

const GenerateCentralTendencies = () => {
  const url = "https://example.com/api";

  const payload = {
    api_key: "your_api_key",
    title: "demo-case4",
    Process_id: 122,
    processSequenceId: 11,
    series: 4,
    seriesvalues: {
      list1: [3, 3, 3, 2, 1, 1, 2, 5, 6, 15],
      list2: [11, 2, 2, 4, 2, 2, 5, 6, 8, 9],
      list3: [9, 2, 3, 3, 4, 4, 4, 7, 8, 9],
      list4: [1, 2, 3, 4, 4, 4, 4, 2, 2, 8],
      list5: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    },
  };

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(payload),
        });

        if (response.status === 201) {
          console.log("Resource created successfully");
          const data = await response.json();
          console.log(data);
        } else {
          console.log(`Request failed with status code: ${response.status}`);
          console.log(await response.text());
        }
      } catch (error) {
        console.log(`Request failed with an exception: ${error.message}`);
      }
    };

    fetchData();
  }, [url, payload]);

  return (
    <div>
      {/* Your React component JSX here */}
    </div>
  );
};

export default GenerateCentralTendencies;