<!--
@component

Metro-like tile. Must be in a group to display correctly.
-->

<script lang="ts">
    import { cva } from "class-variance-authority";

    let {
        size,
        row,
        column,
        icon,
    }: {
        /**
         * Size.
         */
        size: "small" | "medium" | "wide" | "large";

        /**
         * Row index. Must be in a small tiles.
         */
        row: number;

        /**
         * Column index. Must be in a small tiles.
         */
        column: number;

        /**
         * Icon.
         */
        icon: string;
    } = $props();

    /**
     * Tile style.
     **/
    const style = cva(["bg-(--tile-color)", "bg-center", "bg-no-repeat"], {
        variants: {
            size: {
                small: "bg-size-[45px]",
                medium: ["col-span-2", "row-span-2", "bg-size-[90px]"],
                wide: ["col-span-4", "row-span-2", "bg-size-[90px]"],
                large: ["col-span-4", "row-span-4", "bg-size-[180px]"],
            },
        },
    });
</script>

<div
    class={style({ size })}
    style="
        background-image: url({icon});
        grid-column-start: {column};
        grid-row-start: {row};
    "
></div>
