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

/// A widget that displays the background for the Get Started page.
class GetStartedBackground extends StatelessWidget {
  /// Creates a [GetStartedBackground].
  const GetStartedBackground({super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 24.0),
      child: Column(
        children: <Widget>[
          // Logo
          Image.asset(UiImageAssets.logoBlue, height: 40),

          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                // Hero Image
                Container(
                  width: 288,
                  height: 288,
                  margin: const EdgeInsets.only(bottom: 32),
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: UiColors.secondaryForeground.withAlpha(
                      64,
                    ), // 0.5 opacity
                  ),
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: ClipOval(
                      child: Image.network(
                        'https://images.unsplash.com/photo-1577219491135-ce391730fb2c?w=400&h=400&fit=crop&crop=faces',
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                ),
                const SizedBox(height: 32),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
