'use client';

import { convertToEmbedUrl } from "@/utils/function";
import { VideoPopupProps } from "@/types/section";

export default function VideoPopup({ url, onClose, type }: VideoPopupProps) {
    const embedUrl = convertToEmbedUrl(url);

    return (
        <div
            className="fixed inset-0 bg-black/80 flex items-center justify-center z-[9999] p-4"
            onClick={onClose}
        >
            <div
                className={`
                    relative overflow-hidden rounded-lg cursor-pointer group
                    ${type === 'portrait' 
                        ? 'w-full max-w-[300px] aspect-[9/16]' 
                        : 'w-full max-w-[1100px] aspect-video'}
                `}
                onClick={(e) => e.stopPropagation()}
            >

                <iframe
                    src={embedUrl}
                    className="w-full h-full"
                    allow="autoplay; encrypted-media"
                    allowFullScreen
                />

                <div className="absolute top-4 right-2 bg-white px-3 py-1 rounded-lg text-white text-xs font-bold shadow-lg backdrop-blur-sm flex items-center gap-1">
                    <span className="text-red-600">V_LOG</span>
                    <span className="text-gray-800">MEDIA</span>
                </div>
            </div>
        </div>
    );
}
