import Quickshell
import qs.Common

PanelWindow {
    id: root

    property var modelData: null
    property var panelMonitor: modelData? modelData.name:"DP-1"
    property var barComponentsLeft: []
    property var barComponentsCenter: []
    property var barComponentsRight: []

    screen:modelData
    implicitHeight: Theme.barSize

    color: Qt.rgba(0.68, 0.75, 0.88,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
}