"use client";

import { Button } from "./ui/Button";
import { VncScreen } from "react-vnc";

export function BrowserSession({ session, onDelete }) {
  return (
    <div className="border rounded-lg p-4 shadow-sm">
      <div className="flex justify-between items-center mb-4">
        <h3 className="font-semibold">Session {session.id.slice(0, 8)}</h3>
        <span
          className={`px-2 py-1 rounded-full text-xs ${
            session.status === "running"
              ? "bg-green-100 text-green-800"
              : session.status === "failed"
                ? "bg-red-100 text-red-800"
                : "bg-gray-100 text-gray-800"
          }`}
        >
          {session.status}
        </span>
      </div>

      <div className="space-y-2 text-sm">
        <p>Display: {session.display_number}</p>
        <p>VNC Port: {session.vnc_port}</p>
        <p>Debug Port: {session.debug_port}</p>
      </div>

      {session.status === "running" && (
        <div className="mt-4 bg-black w-full h-[300px] rounded">
          <VncScreen
            url={`ws://localhost:8080/api/browser/sessions/${session.id}/vnc`}
            style={{
              width: "100%",
              height: "100%",
            }}
            wsOptions={{
              protocols: ["binary"],
            }}
          />
        </div>
      )}

      <div className="mt-4 flex justify-end">
        <Button
          variant="destructive"
          onClick={onDelete}
          disabled={session.status === "stopped"}
        >
          Stop Session
        </Button>
      </div>
    </div>
  );
}