<script>
    let { style, image, name } = $props();
</script>

<div class="imgbutton {style}">
    <img src={image} alt={name}>
</div>

<style>
    /* Кнопка с изображением */
    .imgbutton {
        height: 100%;
        display: flex;
        flex-direction: column;
        margin: 0;
        align-content: center;
        text-align: center;
        font-size: small;
        padding: 0.5rem;
    }

    .imgbutton img {
        margin-left: auto;
        margin-right: auto;
        margin: 0;
        width: 2rem;
    }
    
    .imgbutton {
        color: white;
    }

    .remove {
        background-color: #FC1F1C;
    }

    .remove:hover {
        background-color: #d32522;
    }

    .edit {
        background-color: #1BC304;
    }

    .edit:hover {
        background-color: #1c9d0b;
    }
</style>