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

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

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

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

<article>
    <div class="heading-center">{name}</div>
    <div>
        <img class="ce-crop" src={ce_img} alt={name}>
    </div>
    <div class={mlb_image}>
        <img class="mlb" src={mlb_ce} alt="Max-limit broken"/>
    </div>
</article>

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

    article {
        background-color: var(--c-darkergray);
        border-color: var(--c-darkgray);
        padding: 20px;
        padding-top: 5px;
        width: 35%;
        height: auto;
        justify-content: center;
        text-align: center;
        transition: transform var(--speed) var(--ease);
        margin: 0px;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto auto 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: flex;
        margin-left: auto;
        margin-right: auto;
    }

    .heading-center {
        display: flex;
        height: 4rem;
        width: 100%;
        align-items: center;
        justify-content: center;
        font-size: 1.25em;
        color: white;
        font-weight: bold;
    }

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

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

    .mlbalign {
        display: flex;
        justify-items: center;
        align-items: center;
    }

    @media (min-width: 512px) {
        .ce-crop {
            width: 7.5em;
            height: 7.5em;
        }
        article {
            width: 10em;
            grid-template-columns: auto;
            grid-template-rows: auto auto 3em;
        }
        .mlbalign {
            width: 7.5em;
        }
    }
</style>