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

// ১. ডেটার টাইপ (Type/Interface) ডিক্লেয়ার করা
interface BackendResponse {
  status: string;
  message: string;
  technologies: string[];
}

const App: React.FC = () => {
  // ২. State গুলোতে Type যুক্ত করা
  const [backendData, setBackendData] = useState<BackendResponse | null>(null);
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {
    // আপনার PHP API এর URL
    fetch('http://spacehero.online/api.php')
      .then((response) => response.json())
      .then((data: BackendResponse) => {
        setBackendData(data); // এখানে শুধুমাত্র BackendResponse টাইপের ডেটাই সেভ হবে
        setLoading(false);
      })
      .catch((error: unknown) => {
        console.error("Error fetching data: ", error);
        setLoading(false);
      });
  }, []);

  return (
    <div style={{ padding: '30px', fontFamily: 'Arial, sans-serif' }}>
      <h1>React (TypeScript) & PHP Backend Demo</h1>
      <hr />

      {loading ? (
        <p>Loading data from backend...</p>
      ) : backendData ? (
        <div style={{ background: '#e0f7fa', padding: '15px', borderRadius: '8px' }}>
          <h3>Message: <span style={{ color: '#00796b' }}>{backendData.message}</span></h3>
          <p>Status: <strong>{backendData.status}</strong></p>
          
          <h4>Technologies:</h4>
          <ul>
            {backendData.technologies.map((tech, index) => (
              <li key={index}>{tech}</li>
            ))}
          </ul>
        </div>
      ) : (
        <p style={{ color: 'red' }}>Failed to load data. Is the PHP server running?</p>
      )}
    </div>
  );
};

export default App;