import qs.config
import QtQuick
import QtQuick.Layouts

Item {
    id: baseCard
    
    Layout.fillWidth: true
    
    implicitHeight: wpBG.implicitHeight

    default property alias content: contentArea.data
    property alias color: wpBG.color

    property int cardMargin: Metrics.margin(20)
    property int cardSpacing: Metrics.spacing(10)
    property int radius: Metrics.radius("large")
    property int verticalPadding: Metrics.padding(40)

    Rectangle {
        id: wpBG
        anchors.left: parent.left
        anchors.right: parent.right
        implicitHeight: contentArea.implicitHeight + baseCard.verticalPadding
        Behavior on implicitHeight {
            enabled: Config.runtime.appearance.animations.enabled
            NumberAnimation {
                duration: Metrics.chronoDuration("small")
                easing.type: Easing.InOutExpo
            }
        }
        color: Appearance.m3colors.m3surfaceContainerLow
        Behavior on color {
            enabled: Config.runtime.appearance.animations.enabled
            ColorAnimation {
                duration: Metrics.chronoDuration("small")
                easing.type: Easing.InOutExpo
            }
        }
        radius: baseCard.radius
    }

    RowLayout {
        id: contentArea
        anchors.top: wpBG.top
        anchors.left: wpBG.left
        anchors.right: wpBG.right
        anchors.margins: baseCard.cardMargin
        spacing: baseCard.cardSpacing
    }
}