import { BrowserSession } from "./BrowserSession";

export default function BrowserList({ sessions, onSessionsChange, onError }) {
  const handleDelete = async (sessionId) => {
    try {
      const response = await fetch(
        `http://localhost:8080/api/browser/sessions/${sessionId}`,
        {
          method: "DELETE",
        },
      );
      if (!response.ok) throw new Error("Failed to delete session");
      onSessionsChange(sessions.filter((session) => session.id !== sessionId));
    } catch (err) {
      onError(err.message);
    }
  };

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      {sessions.map((session) => (
        <BrowserSession
          key={session.id}
          session={session}
          onDelete={() => handleDelete(session.id)}
        />
      ))}
    </div>
  );
}