// Compact "slim" card — a 44px thumbnail with a title / subtitle, used
// in grid sections like Popular albums and Recently Played. Optionally
// rank-numbered on the left.

import { Theme } from "../foundation/semantic-colors.slint";
import { Typography } from "../foundation/typography.slint";
import { Radius } from "../foundation/radius.slint";
import { SlimItem } from "../state.slint";

export component SlimCard inherits Rectangle {
    in property <SlimItem> item;
    callback clicked(string);

    height: 60px;
    border-radius: Radius.sm;
    background: ta.has-hover ? Theme.surface-hover : transparent;

    HorizontalLayout {
        padding-left: 8px;
        padding-right: 8px;
        spacing: 12px;

        if root.item.rank != "": VerticalLayout {
            alignment: center;
            Text {
                text: root.item.rank;
                width: 20px;
                color: Theme.text-muted;
                font-size: Typography.body;
                horizontal-alignment: center;
            }
        }

        VerticalLayout {
            alignment: center;
            Rectangle {
                width: 44px;
                height: 44px;
                border-radius: 4px;
                background: Theme.surface-elevated;
                clip: true;
                Image {
                    width: 100%;
                    height: 100%;
                    source: root.item.artwork;
                    image-fit: cover;
                }
            }
        }

        VerticalLayout {
            alignment: center;
            horizontal-stretch: 1;
            spacing: 2px;
            Text {
                text: root.item.title;
                color: Theme.text-primary;
                font-size: Typography.link;
                font-weight: Typography.medium;
                overflow: elide;
            }
            Text {
                text: root.item.subtitle;
                color: Theme.text-muted;
                font-size: 12px;
                overflow: elide;
            }
        }
    }

    ta := TouchArea {
        mouse-cursor: pointer;
        clicked => {
            root.clicked(root.item.id);
        }
    }
}