import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

// Widget für eine erweiterbare Box
class ExpandableBox extends StatefulWidget {
  final String headerText;
  final Widget expandedContent;

  const ExpandableBox({super.key, required this.headerText, required this.expandedContent});

  @override
  // ignore: library_private_types_in_public_api
  _ExpandableBoxState createState() => _ExpandableBoxState();
}

class _ExpandableBoxState extends State<ExpandableBox> {
  bool _isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // GestureDetector zum Erfassen von Klicks zum Erweitern oder Verkleinern der Box
        GestureDetector(
          onTap: () {
            setState(() {
              _isExpanded = !_isExpanded;
            });
          },
          child: Container(
            decoration: BoxDecoration(
              color: CupertinoColors.extraLightBackgroundGray,
              borderRadius: _isExpanded ? const BorderRadius.only(topLeft: Radius.circular(5), topRight: Radius.circular(5),) : BorderRadius.circular(5),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 16.0),
                  child: Text(
                    widget.headerText,
                    style: const TextStyle(
                      fontWeight: FontWeight.bold
                    ),
                  ),
                ),
                Icon(
                  _isExpanded ? Icons.keyboard_arrow_up : Icons.keyboard_arrow_down,
                  size: 30,
                ),
              ],
            ),
          ),
        ),
        if (_isExpanded)
          Container(
            decoration: const BoxDecoration(
              color: CupertinoColors.extraLightBackgroundGray,
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(5),
                bottomRight: Radius.circular(5),
              ),
            ),
            child: Padding(
              padding: const EdgeInsets.all(20), // Hier kannst du den gewünschten Padding-Wert festlegen
              child: widget.expandedContent,
            ),
          )
      ],
    );
  }
}