import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import QtQuick.Effects

ColumnLayout {
    id: root
    spacing: 8
    
    default property alias content: contentColumn.data
    property string title: ""
    Accessible.name: root.title + " settings group"
    Accessible.role: Accessible.Grouping

    // Section Header
    Text {
        text: root.title
        color: SettingsStyle.accent // Accented header for more color
        font.family: "JetBrains Mono"
        font.pixelSize: 12
        font.bold: true
        font.capitalization: Font.AllUppercase
        font.letterSpacing: 1.5
        Layout.leftMargin: 4
        Layout.bottomMargin: 4
        visible: text !== ""
    }

    // Card Container
    Rectangle {
        Layout.fillWidth: true
        // Height checks children
        implicitHeight: contentColumn.implicitHeight
        
        color: SettingsStyle.surfaceCard
        radius: SettingsStyle.cardRadius
        border.color: SettingsStyle.borderSubtle
        border.width: 1
        
        ColumnLayout {
            id: contentColumn
            anchors.fill: parent
            anchors.margins: 1 // Minimal margin to not overlap border
            spacing: 0 // No gaps, rely on separators
            
            // Clip content to rounded corners
            layer.enabled: true
            layer.effect: MultiEffect {
                maskEnabled: true
                maskThresholdMin: 0.5
                maskSpreadAtMin: 1.0
                maskSource: ShaderEffectSource {
                    sourceItem: Rectangle {
                        width: contentColumn.width
                        height: contentColumn.height
                        radius: SettingsStyle.cardRadius - 1
                        color: "black"
                    }
                }
            }
        }
    }
}
