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

/// A header widget for the one-time order flow with a colored background.
class OneTimeOrderHeader extends StatelessWidget {
  /// Creates a [OneTimeOrderHeader].
  const OneTimeOrderHeader({
    required this.title,
    required this.subtitle,
    required this.onBack,
    super.key,
  });

  /// The title of the page.
  final String title;

  /// The subtitle or description.
  final String subtitle;

  /// Callback when the back button is pressed.
  final VoidCallback onBack;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(
        top: MediaQuery.of(context).padding.top + UiConstants.space5,
        bottom: UiConstants.space5,
        left: UiConstants.space5,
        right: UiConstants.space5,
      ),
      color: UiColors.primary,
      child: Row(
        children: <Widget>[
          GestureDetector(
            onTap: onBack,
            child: Container(
              width: 40,
              height: 40,
              decoration: BoxDecoration(
                color: UiColors.white.withValues(alpha: 0.2),
                borderRadius: UiConstants.radiusMd,
              ),
              child: const Icon(
                UiIcons.chevronLeft,
                color: UiColors.white,
                size: 24,
              ),
            ),
          ),
          const SizedBox(width: UiConstants.space3),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                title,
                style: UiTypography.headline3m.copyWith(color: UiColors.white),
              ),
              Text(
                subtitle,
                style: UiTypography.footnote2r.copyWith(
                  color: UiColors.white.withValues(alpha: 0.8),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}
