// Full quality badge — a faithful port of the Tauri QualityBadgeStatic
// (full mode): a contained pill with the format icon, the tier label, and
// the exact bit-depth / sample-rate line.
//
// Intentionally not a creative reinterpretation — the Tauri layout is the
// contract. Used wherever a track list or detail view advertises its
// stored quality.

import { Theme } from "../foundation/semantic-colors.slint";
import { QbzIcon } from "QbzIcon.slint";

export component QualityBadgeFull inherits Rectangle {
    // "hires" | "cd" | "mp3" | "".
    in property <string> tier;
    // Exact quality, e.g. "24-bit / 96 kHz".
    in property <string> detail;

    property <string> tier-label: root.tier == "hires"
        ? "HI-RES"
        : (root.tier == "mp3" ? "MP3" : "CD");

    visible: root.tier != "";
    height: 36px;
    width: Math.max(content.preferred-width, 136px);
    border-radius: 4px;
    background: Theme.surface-hover;
    border-width: 1px;
    border-color: Theme.border-subtle;

    content := HorizontalLayout {
        padding-left: 10px;
        padding-right: 10px;
        spacing: 6px;

        // Format icon. The Hi-Res brand mark keeps its own colors; the
        // CD / MP3 marks render in muted grey.
        VerticalLayout {
            alignment: center;
            if root.tier == "hires": Image {
                source: @image-url("../assets/hi-res.svg");
                width: 24px;
                height: 24px;
                image-fit: contain;
            }
            if root.tier == "cd": QbzIcon {
                source: @image-url("../assets/cd.svg");
                width: 16px;
                height: 16px;
                tint: #b0b0b0;
            }
            if root.tier == "mp3": QbzIcon {
                source: @image-url("../assets/mp3.svg");
                width: 16px;
                height: 16px;
                tint: #b0b0b0;
            }
        }

        VerticalLayout {
            alignment: center;
            spacing: 1px;
            Text {
                text: root.tier-label;
                color: #b0b0b0;
                font-size: 8px;
                font-weight: 100;
                letter-spacing: 0.5px;
            }
            Text {
                text: root.detail;
                color: #999999;
                font-size: 9px;
                font-weight: 100;
            }
        }
    }
}