import React, { useEffect } from 'react';

const YourComponent = () => {
  const fetchData = async () => {
    const url = "https://www.socialmediaautomation.uxlivinglab.online/api/v1/generate-sentences/";

    const payload = {
      "target_industry": "Technology & Telecom",
      "target_product": "Social Media Automation",
      "object": "gift",
      "verb": "present",
      "adjective": "small",
      "subject": "Livinglab",
      "object_determinant": "the",
      "object_number": "singular",
      "subject_number": "singular",
      "email": "test@gmail.com",
      "api_key": "c2636d98-4f43-4be1-9e3b-47cdfcbe832b",
    };

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

      if (response.ok) {
        const data = await response.json();
        console.log(data); // Replace with your logic for handling the response data
      } else {
        console.error(`Request failed with status code: ${response.status}`);
      }
    } catch (error) {
      console.error('An error occurred:', error);
    }
  };

  useEffect(() => {
    fetchData();
  }, []); // This ensures that the fetchData function is called when the component mounts

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

export default YourComponent;