import { CSSProperties, useMemo } from 'react';

import { Game } from '../../lib/types';
import { coverColorsFor, titleFontSize } from '../../lib/cover';
import { CoverAspect } from '../../hooks/useSettings';

interface Props {
    game: Game;
    aspect: CoverAspect;
    thumbnailUrl?: string | null;
    /** Hide the cover-bottom title overlay (used inside the detail modal hero). */
    hideTitle?: boolean;
}

/**
 * Cover art. When a real thumbnail is available it's rendered as the
 * background image with the same gradient/vignette overlays as the
 * placeholder; otherwise the design's procedurally-generated gradient stands
 * in. The Bebas Neue title overlay is rendered on top of either.
 */
export const GameCover = ({ game, aspect, thumbnailUrl, hideTitle = false }: Props) => {
    const colors = useMemo(() => coverColorsFor(game.id), [game.id]);
    const hasThumbnail = Boolean(thumbnailUrl);
    // Real cover art already contains its own title; only burn the Bebas Neue
    // overlay onto the procedurally-generated placeholder.
    const showOverlayTitle = !hideTitle && !hasThumbnail;
    const titleStyle: CSSProperties = {
        fontSize: titleFontSize(game.name, aspect),
        textShadow: `0 4px 16px ${colors.c2}aa, 0 1px 0 rgba(0,0,0,.3)`,
    };

    return (
        <div className="cover">
            {hasThumbnail ? (
                <img className="cover-image" src={thumbnailUrl!} alt="" loading="lazy" />
            ) : (
                <>
                    <div
                        className="cover-base"
                        style={{
                            background: `linear-gradient(${colors.angle}deg, ${colors.c1} 0%, ${colors.c2} 100%)`,
                        }}
                    />
                    <div
                        className="cover-blob"
                        style={{
                            background: `radial-gradient(ellipse at ${colors.blobX}% ${colors.blobY}%, ${colors.accent}38, transparent 55%)`,
                        }}
                    />
                </>
            )}
            <div className="cover-grain" />
            {showOverlayTitle && (
                <div className="cover-titlewrap">
                    <div className="cover-title" style={titleStyle}>
                        {game.name}
                    </div>
                </div>
            )}
            <div className="cover-vignette" />
        </div>
    );
};