import React from "react";

interface TopAreaProps {
    name: string;
    image?: string;
}

function TitleArea({ name, image }: TopAreaProps) {
    const marginTop = image ? 0 : 25;
    return (
        <div className={"detail-view-top-area"} style={{ marginTop }}>
            {image && (
                <img
                    id={"infoOverlayImage"}
                    src={image}
                    className={"detail-view-image"}
                />
            )}
            <h2 id={"infoOverlayHeadline"} className={"detail-view-headline"}>
                {name}
            </h2>
        </div>
    );
}

export default TitleArea;