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

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

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

  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))",
        gap: "10px",
        padding: "10px"
      }}
    >
      {apps.map(app => (
        <div
          key={app.name}
          style={{
            textAlign: "center",
            cursor: "pointer",
            padding: "10px"   // niente border
          }}
          onClick={() => window.open(`http://${app.host}:${app.port}`, "_blank")}
        >
          {/* Icona grande il doppio */}
          <img
            src={app.icon}
            alt={app.name}
            style={{ width: "80px", height: "80px", objectFit: "contain" }}
          />
          {/* Nome sotto l'icona */}
          <div style={{ fontWeight: "bold", marginTop: "8px" }}>{app.name}</div>
        </div>
      ))}
    </div>
  );
}

export default AppGrid;