// Import necessary modules
import React, { useState } from 'react';
import axios from 'axios'; // Ensure axios is installed via npm or yarn

// Define the functional component for sending SMS
const SendMessage = () => {
  // State variables to store input values
  const [sender, setSender] = useState('');
  const [recipient, setRecipient] = useState('');
  const [message, setMessage] = useState('');
  const [createdBy, setCreatedBy] = useState('');

  // Function to handle form submission
  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      // Make POST request to the API endpoint with user input
      const response = await axios.post(`https://100085.pythonanywhere.com/api/v1/dowell-sms/${YOUR_API_KEY}/`, {
        sender: sender,
        recipient: recipient,
        content: message,
        created_by: createdBy
      });
      console.log(response.data); // Log response data
      // Reset form inputs after successful submission
      setSender('');
      setRecipient('');
      setMessage('');
      setCreatedBy('');
    } catch (error) {
      console.error('Error sending SMS:', error); // Log error if request fails
    }
  };

  return (
    <div>
      <h2>Send SMS</h2>
      <form onSubmit={handleSubmit}>
        {/* Input fields for sender, recipient, message, and creator */}
        <input type="text" placeholder="Sender Name" value={sender} onChange={(e) => setSender(e.target.value)} required />
        <input type="tel" placeholder="Recipient Phone Number" value={recipient} onChange={(e) => setRecipient(e.target.value)} required />
        <textarea placeholder="Message" value={message} onChange={(e) => setMessage(e.target.value)} required />
        <input type="text" placeholder="Your Name" value={createdBy} onChange={(e) => setCreatedBy(e.target.value)} required />
        {/* Button to submit the form */}
        <button type="submit">Send</button>
      </form>
    </div>
  );
};

export default SendMessage;