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

/** Click-to-load: no third-party requests until the user asks for the video. */
export default function TrailerEmbed({ id, title, poster }: { id: string; title: string; poster?: string | null }) {
    const [on, setOn] = useState(false);
    return (
        <div className="relative aspect-video overflow-hidden rounded-2xl border border-border bg-black shadow-soft">
            {on ? (
                <iframe
                    src={`https://www.youtube-nocookie.com/embed/${encodeURIComponent(id)}?autoplay=1&rel=0&modestbranding=1`}
                    title={`${title} trailer`}
                    allow="autoplay; encrypted-media; picture-in-picture; fullscreen"
                    allowFullScreen
                    referrerPolicy="strict-origin-when-cross-origin"
                    className="absolute inset-0 size-full"
                />
            ) : (
                <button onClick={() => setOn(true)} aria-label={`Play ${title} trailer`} className="group absolute inset-0">
                    {poster && <img src={poster} alt="" className="size-full object-cover opacity-70 transition duration-500 group-hover:scale-[1.03] group-hover:opacity-90" />}
                    <span className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
                    <span className="absolute left-1/2 top-1/2 flex size-16 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border border-white/20 bg-white/10 text-white backdrop-blur-md transition group-hover:scale-110 group-hover:bg-white/20">
                        <Play className="ml-0.5 size-6 fill-current" />
                    </span>
                </button>
            )}
        </div>
    );
}