import Quickshell
import qs.Common

PanelWindow {
    id: root

    property var panelMonitor: "DP-1"
    property var barComponentsLeft: []
    property var barComponentsCenter: []
    property var barComponentsRight: []

    implicitHeight: Theme.barSize

    color: Qt.rgba(0.68, 0.75, 0.88,0)
    screen: Quickshell.screens.filter((screen) => {
        return screen.name == panelMonitor;
    })[0]

    anchors {
        top: true
        left: true
        right: true
    }

    BarArea{
        anchors{
            left:parent.left
            verticalCenter:parent.verticalCenter
        }
        monitor:root.panelMonitor
        components:root.barComponentsLeft
    }

    BarArea{
        anchors{
            horizontalCenter:parent.horizontalCenter
            verticalCenter:parent.verticalCenter
        }
        monitor:root.panelMonitor
        components:root.barComponentsCenter
    }

    BarArea{
        anchors{
            right:parent.right
            verticalCenter:parent.verticalCenter
        }
        monitor: root.panelMonitor
        components:root.barComponentsRight
    }
        // Helper function to set monitor property on loaded items
}