// Page-level tabs, for a page that is genuinely several subjects.
//
//   SettingsTabs {
//       tabs: [{ value: "theme", label: "Theme" }, …]
//       current: root.tab
//       onSelected: value => root.tab = value
//   }
//
// Only for pages long enough that scrolling hides the control someone came for.
// Appearance was six cards deep, so light and dark -- the thing reached most --
// sat below a wallpaper grid and an entire lock screen. Tabs are not a way to
// make a short page look organised; they are for when the page is long enough
// that the order stops being a suggestion and starts being a burial.

import QtQuick
import qs.config

Item {
    id: root

    // [{ value, label }]
    property var tabs: []
    property string current: ""

    signal selected(string value)

    width: parent ? parent.width : 620
    implicitHeight: 40

    Row {
        id: strip
        anchors.left: parent.left
        anchors.bottom: parent.bottom
        spacing: 2

        Repeater {
            model: root.tabs

            delegate: Item {
                id: tab

                required property var modelData

                readonly property bool active: String(tab.modelData.value) === root.current

                implicitWidth: caption.implicitWidth + 30
                implicitHeight: 38

                Text {
                    id: caption
                    anchors.centerIn: parent
                    text: String(tab.modelData.label ?? "")
                    color: tab.active ? Theme.fg : (hover.hovered ? Theme.fgDim : Theme.fgMuted)
                    font.family: Theme.fontFamily
                    font.pixelSize: Theme.fontSize
                    font.weight: tab.active ? Font.DemiBold : Font.Medium
                }

                Rectangle {
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.bottom: parent.bottom
                    height: 2
                    radius: 1
                    visible: tab.active
                    color: Theme.accent
                }

                HoverHandler {
                    id: hover
                    cursorShape: Qt.PointingHandCursor
                }

                TapHandler {
                    onTapped: root.selected(String(tab.modelData.value))
                }
            }
        }
    }

    Rectangle {
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        height: 1
        color: Theme.alpha(Theme.fg, 0.08)
        z: -1
    }
}