import QtQuick
import QtQuick.Layouts
import QtQuick.Controls

Rectangle {
    id: root
    Layout.fillWidth: true
    Layout.preferredHeight: SettingsStyle.itemHeight
    Layout.minimumHeight: SettingsStyle.itemHeight
    Layout.maximumHeight: SettingsStyle.itemHeight
    implicitHeight: SettingsStyle.itemHeight
    
    color: hHandler.hovered ? SettingsStyle.surfaceHover : "transparent"
    radius: 0 // Continuous list style (clipped by container container) 
    
    // Properties
    property string label: "Setting Name"
    property string description: ""
    property alias control: controlContainer.data
    property bool showSeparator: true
    
    Behavior on color { ColorAnimation { duration: 150 } }

    HoverHandler {
        id: hHandler
    }

    // Label & Description
    Column {
        id: labelCol
        anchors.left: parent.left
        anchors.leftMargin: 16
        anchors.right: controlContainer.left
        anchors.rightMargin: 16
        anchors.verticalCenter: parent.verticalCenter
        spacing: 2
        
        Text {
            id: labelText
            text: root.label
            color: SettingsStyle.textPrimary
            font.family: "JetBrains Mono"
            font.pixelSize: 13
            font.weight: Font.Medium
            width: parent.width
            elide: Text.ElideRight
            
            // Text Layout Normalization
            verticalAlignment: Text.AlignVCenter
            topPadding: 0
            bottomPadding: 0
        }
        
        Text {
            id: descText
            text: root.description
            color: SettingsStyle.textSecondary
            font.family: "JetBrains Mono"
            font.pixelSize: 11
            width: parent.width
            visible: text !== ""
            wrapMode: Text.WordWrap
            
            // Text Layout Normalization
            verticalAlignment: Text.AlignVCenter
            topPadding: 0
            bottomPadding: 0
        }
    }

    // Control Container
    Item {
        id: controlContainer
        anchors.right: parent.right
        anchors.rightMargin: 16
        anchors.verticalCenter: parent.verticalCenter
        implicitWidth: childrenRect.width
        implicitHeight: childrenRect.height
    }

    // Bottom Separator
    Rectangle {
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.leftMargin: 16
        anchors.rightMargin: 16
        height: 1
        color: SettingsStyle.borderSubtle
        visible: root.showSeparator
    }
}