---
export interface Props {
	name: string;
    link: string;
	mlb: string;
}

const {mlb, link, name } = Astro.props;

const ce_img: string = `ce/${link}.png`;
let mlb_image: string = "mlbalign";

if(mlb === "false") {
    mlb_image = "hidemlb";
}
---

<article>
    <div class="heading-center">
        <h1>{name}</h1>
    </div>
    <div>
        <img class="ce-crop" src={ce_img} alt="A Fragment of 2030">
    </div>
    <div class={mlb_image}>
        <img class="mlb" src="ce/mlb.png" alt="Max-limit broken"/>
    </div>
</article>

<style>
    .hidemlb {
        display: none;
        height: 1em;
    }

    article {
        background-color: rgb(27, 27, 27);
        border-color: #1e1e1e;
        padding: 20px;
        padding-top: 5px;
        width: 7em;
        height: auto;
        justify-content: center;
        text-align: center;
        transition: transform var(--speed) var(--ease);
        overflow: hidden;
        margin: 0px;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto 11em 3em;
        gap: 0px 0px;
        grid-auto-flow: row;
        grid-template-areas:
            "."
            "."
            ".";
        }

    article:hover {
        transform: scale(var(--hover-scale));
    }

    article div {
        margin: 0.5em auto;
    }

    img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .heading-center {
        display: table;
        height: 4rem;
    }

    .heading-center > h1 {
        font-size: 1.25em;
        color: white;
        width: 12rem;
        display: table-cell;
        vertical-align: middle;
    }

    .ce-crop {
        width: 6em;
        height: 6em;
        object-fit: cover;
        object-position: 0% 0%;
    }

    @media (min-width: 512px) {
        .ce-crop {
            width: 10em;
            height: 10em;
        }
        article {
            width: auto;
        }
    }

    .mlb {
        width: 60%;
        margin-left: auto;
        margin-right: auto;
    }

    .mlbalign {
        width: 10em;
        display: flex;
        justify-items: center;
        align-items: center;
    }
</style>