"use client";

import dynamic from "next/dynamic";
import { useSearchParams } from "next/navigation";

const LasersList = dynamic(() => import("@/app/lasers/page"), { ssr: false });

function DetailsFrame({ src }: { src: string }) {
    return (
        <iframe
        key={src}
        src={src}
        className="w-full h-[70vh] rounded-md border"
        sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
        />
    );
}

export default function LaserSourcesClient() {
    const search = useSearchParams();
    const id = search.get("id");

    return (
        <div className="space-y-4">
        <div className="rounded-lg border p-6">
        <h2 className="mb-4 text-xl font-semibold">Laser Sources</h2>
        <LasersList />
        </div>

        {id && (
            <div className="rounded-lg border p-4">
            <div className="mb-2 text-sm opacity-70">Viewing source #{id}</div>
            <DetailsFrame src={`/lasers/${id}`} />
            </div>
        )}
        </div>
    );
}