import { Palette } from "std-widgets.slint";

export component FooterButton inherits Rectangle {
    in property <string> title: "Button";
    in property <image> icon;
    callback clicked <=> touch.clicked;

    states [
        pressed when touch.pressed: {
             background: #0000ff30;
        }
        hovered when touch.has-hover: {
             background: #0000ff15;
        }
        default: {
            background: #0000;
        }
    ]

    animate background {
         duration: 0.1s;
         easing: ease-in-out;
    }

    border-radius: 20px;

    VerticalLayout {
        padding: 10px;
        padding-left: 20px;
        padding-right: 20px;
        Image {
            source: icon;
            colorize: #accbfa;
        }
        Text {
            text: title;
            horizontal-alignment: center;
        }
    }

    touch := TouchArea {}
}

export component Footer inherits Rectangle {
    width: 100%;
    height: 88px;
    background: Palette.alternate-background;

    HorizontalLayout {
        height: parent.height;
        spacing: 16px;
        padding-top: 8px;
        padding-bottom: 16px;
        padding-left: 16px;
        padding-right: 16px;

        @children
    }
}