'use client'

import GiftLottieOnce from '@/components/GiftLottieOnce'
import type { GiftLottiePlayItem } from '@/lib/gifts/useGiftLottiePlayback'

type GiftFullscreenLottieOverlayProps = {
    item: GiftLottiePlayItem | null
    onDone: () => void
    /**
     * player：桌機限播放器區域內；小螢幕仍全視窗
     * viewport：永遠全視窗
     */
    scope?: 'player' | 'viewport'
}

/** 直播畫面滿版禮物 Lottie（不佔聊天訊息區） */
export default function GiftFullscreenLottieOverlay({
    item,
    onDone,
    scope = 'player',
}: GiftFullscreenLottieOverlayProps) {
    if (!item) return null

    const positionClass =
        scope === 'player'
            ? 'fixed inset-0 z-[180] [@media(min-width:965px)]:absolute [@media(min-width:965px)]:inset-0 [@media(min-width:965px)]:z-[28]'
            : 'fixed inset-0 z-[180]'

    return (
        <div
            className={`pointer-events-none flex items-center justify-center overflow-hidden bg-transparent ${positionClass}`}
            aria-hidden
        >
            <GiftLottieOnce
                key={item.id}
                url={item.url}
                onDone={onDone}
                className="h-full w-full max-h-full max-w-full object-contain"
            />
        </div>
    )
}