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

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

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

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

  /// The formatted current date.
  final String date;

  /// The formatted current time.
  final String time;

  /// 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,
      ),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: <Color>[
            UiColors.destructive,
            UiColors.destructive.withValues(alpha: 0.85),
          ],
          begin: Alignment.centerLeft,
          end: Alignment.centerRight,
        ),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          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>[
                  Row(
                    children: <Widget>[
                      const Icon(UiIcons.zap, color: UiColors.accent, size: 18),
                      const SizedBox(width: UiConstants.space2),
                      Text(
                        title,
                        style: UiTypography.headline3m.copyWith(
                          color: UiColors.white,
                        ),
                      ),
                    ],
                  ),
                  Text(
                    subtitle,
                    style: UiTypography.footnote2r.copyWith(
                      color: UiColors.white.withValues(alpha: 0.8),
                    ),
                  ),
                ],
              ),
            ],
          ),
          Column(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: <Widget>[
              Text(
                date,
                style: UiTypography.footnote2r.copyWith(
                  color: UiColors.white.withValues(alpha: 0.9),
                ),
              ),
              Text(
                time,
                style: UiTypography.footnote2r.copyWith(
                  color: UiColors.white.withValues(alpha: 0.9),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}
