'use client'; 

import { useState } from 'react';
import { Loader2 } from 'lucide-react';

interface PreviewPageProps {
    params: { id: string, publisherId: string };
}

export default  function PreviewPage({ params }: PreviewPageProps) {
    const { id, publisherId } = params;
    const [isLoading, setIsLoading] = useState(true); 

    return (
        <div style={{ position: 'relative', width: '100%', height: '100vh' }}>

            {isLoading && (
                <div className="absolute inset-0 flex flex-col items-center justify-center z-50 bg-white/80 backdrop-blur-sm">
                    <Loader2 className="w-10 h-10 text-blue-600 animate-spin" />
                    <p className="mt-2 text-sm font-medium text-gray-600">Loading Preview...</p>
                </div>
            )}

            <iframe
                src={`/web-api/preview/${id}/${publisherId}`}
                style={{
                    width: "100%",
                    height: "100vh",
                    border: "none",
                    display: isLoading ? 'none' : 'block',
                }}
                onLoad={() => setIsLoading(false)} 
            />
        </div>
    );
}