import 'package:flutter/material.dart';
import 'package:food_hub_app/models/recipe.dart';
import 'package:timelines_plus/timelines_plus.dart';

class RecipeTimeline extends StatelessWidget {
  final List<Recipe> recipeList;

  const RecipeTimeline({super.key, required this.recipeList});

  @override
  Widget build(BuildContext context) {
    return Timeline.tileBuilder(
      theme: TimelineThemeData(nodePosition: 0, indicatorPosition: 0),
      builder: TimelineTileBuilder.connected(
        itemCount: recipeList.length,
        connectorBuilder:
            (context, index, type) => Connector.solidLine(thickness: 2),
        indicatorBuilder: (context, index) {
          return Indicator.dot(size: 12.0);
        },
        contentsBuilder: (context, index) {
          return TimelineCard(recipe: recipeList[index]);
        },
      ),
    );
  }
}

class TimelineCard extends StatelessWidget {
  final Recipe recipe;

  const TimelineCard({super.key, required this.recipe});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      child: Padding(
        padding: const EdgeInsets.only(left: 10, bottom: 10),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              recipe.date,
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            ),
            Card(
              elevation: 0,
              color: Colors.white,
              child: Padding(
                padding: EdgeInsets.all(10),
                child: Column(
                  children: [
                    Text(recipe.name, style: TextStyle(fontSize: 16)),
                    const SizedBox(height: 10),
                    Image.network(
                      recipe.imageUrl,
                      width: double.infinity,
                      height: 250,
                      fit: BoxFit.contain,
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}