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

class OnboardingCard extends StatelessWidget {
  int index;
  String title;
  String description;
  String imagePath;

  OnboardingCard({
    required this.index,
    required this.title,
    required this.description,
    required this.imagePath,
  });

  @override
  Widget build(BuildContext context) {
    Color baseColor = Theme.of(context).primaryColor;
    // have a different color for each card, incrementing the hue
    Color currentColor = baseColor.withAlpha(baseColor.alpha - index * 30);
    return Container(
      color: currentColor,
      child: Padding(
        padding: EdgeInsets.all(20),
        child: Column(
          children: [
            Text(
              title,
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
            ),
            Padding(padding: EdgeInsets.only(top: 20)),
            SvgPicture.asset(
              imagePath,
              height: 200,
            ),
            Padding(padding: EdgeInsets.only(top: 20)),
            Text(
              description,
              style: TextStyle(
                fontSize: 16,
              ),
            ),
          ],
        ),
      )
    );
  }
}