🧩 Section Widget

Section is a reusable layout widget that displays a styled content block with a header, body, and an optional call-to-action area (typically a row of buttons).
It supports different visual styles (primary, secondary, success, danger) and configurable outer margin spacing (simple, double).

---

🧱 Constructor

Section({
  required Widget header,
  required Widget body,
  Widget? callToAction,
  String? style,
  SectionMargin sectionMargin = SectionMargin.simple,
})

---

📐 Parameters

Parameter	Type	Required	Default	Description
header	Widget	✅	–	Top widget of the section (usually a title or heading).
body	Widget	✅	–	Main content of the section.
callToAction	Widget?	❌	null	Bottom widget, usually a row of action buttons. Must be an instance of [ActionWidget] — this is enforced by the type system at compile time.
style	String?	❌	null	Visual background style (primary, secondary, success, danger).
sectionMargin	SectionMargin	❌	SectionMargin.simple	Controls the outer spacing (simple or double).

---

🎨 Supported Styles

Style	Background color
primary	Colors.blue.shade50
secondary	Colors.grey.shade200
success	Colors.green.shade50
danger	Colors.red.shade50
null	No background

---

📏 Margin Options

enum SectionMargin {
  simple, // EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0)
  double  // EdgeInsets.symmetric(horizontal: 32.0, vertical: 16.0)
}

Used to control the space between the Section and surrounding widgets.

---

💡 Example Usage

Section(
  style: 'primary',
  sectionMargin: SectionMargin.double,
  header: Text("Ready to continue?"),
  body: Text("Click one of the buttons below to proceed."),
  callToAction: ActionWidget(
    alignment: ActionAlignment.right,
    buttons: [
      Button(label: "Cancel", onPressed: () {}),
      Button(label: "Confirm", onPressed: () {}, fill: true),
    ],
  ),
)

---

📌 Notes

• callToAction must be an instance of ActionWidget — if you pass a different widget, the compiler will throw an error.
• ActionWidget can hold up to 3 buttons, with a maximum of 2 containing text.
• The Section automatically applies padding and border radius when a background style is set.
• Future improvements: apply breakpoints and MediaQuery to propagate style to header.
• Colors in getBackgroundColor will be replaced with tokens from mix_tokens.dart in the future.