import 'package:eatvio_app/core/const.dart';
import 'package:eatvio_app/core/theme/custom_text_style.dart';
import 'package:eatvio_app/core/theme/theme_helper.dart';
import 'package:eatvio_app/core/widgets/main_background_bouble.dart';
import 'package:eatvio_app/features/feed/models/recipes_model.dart';
import 'package:eatvio_app/generated/l10n.dart';
import 'package:flutter/widgets.dart';

class StepsWidget extends StatelessWidget {
  const StepsWidget({super.key, required this.recipe});
  final Recipe recipe;
  @override
  Widget build(BuildContext context) {
    final s = S.of(context);
    return MainBackgroundBouble(
      padding: const EdgeInsets.all(16),
      child: Column(
        spacing: 16,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            s.step_by_step_photo_recipe,
            style: TextStyles.headingXLSemibold.copyWith(color: appTheme.black),
          ),
          ...List.generate(recipe.steps?.length ?? 0, (index) {
            return Column(
              spacing: 8,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  decoration: BoxDecoration(
                    color: appTheme.blueA400,
                    borderRadius: BorderRadius.circular(8),
                  ),
                  padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                  child: Text(
                    '${s.step} ${index + 1}',
                    style: TextStyles.textSSemibold.copyWith(color: appTheme.whiteA700),
                  ),
                ),
                if (recipe.steps?[index].image != null && recipe.steps![index].image.isNotEmpty)
                  AspectRatio(
                    aspectRatio: 16 / 12,
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(16),
                      child: Image.network(
                        '$baseUrl/storage/${recipe.steps![index].image}',
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                Text(
                  recipe.steps![index].description,
                  style: TextStyles.textMMedium.copyWith(color: appTheme.black),
                ),
              ],
            );
          }),
        ],
      ),
    );
  }
}