import React, { useEffect, useState } from "react";
import "./App.css"; // importiamo lo stile CSS

function AppGrid() {
  const [apps, setApps] = useState([]);

  useEffect(() => {
    fetch("/apps")
      .then(res => res.json())
      .then(data => setApps(Array.isArray(data) ? data : []))
      .catch(() => setApps([]));
  }, []);

  return (
    <div className="app-grid">
      {apps.map(app => (
        <div
          key={app.name}
          className="app-card"
          onClick={() => window.open(`http://${app.host}:${app.port}`, "_blank")}
        >
          <img src={app.icon} alt={app.name} className="app-icon" />
          <div className="app-name">{app.name}</div>
        </div>
      ))}
    </div>
  );
}

export default AppGrid;