import 'package:flutter/material.dart';
import 'package:mileograph_flutter/services/dataService.dart';

import 'package:provider/provider.dart';

class TopTractionPanel extends StatelessWidget {
  Widget build(BuildContext context) {
    final data = context.watch<DataService>();
    return Padding(
      padding: const EdgeInsets.all(10.0),
      child: Card(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "Top Traction",
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
                decoration: TextDecoration.underline,
              ),
            ),
            Column(
              children: List.generate(data.homepageStats?.topLocos.length ?? 0, (
                index,
              ) {
                final loco = data.homepageStats!.topLocos[index];
                return Container(
                  width: double.infinity,
                  child: Container(
                    margin: EdgeInsets.symmetric(horizontal: 0, vertical: 8),
                    child: Padding(
                      padding: EdgeInsets.all(8),

                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text.rich(
                                TextSpan(
                                  children: [
                                    TextSpan(
                                      text: '${index + 1}. ',
                                      style: TextStyle(
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                    TextSpan(
                                      text:
                                          '${loco.locoClass} ${loco.locoNumber}',
                                    ),
                                  ],
                                ),
                              ),
                              Text(
                                '${loco.locoName}',
                                style: TextStyle(fontStyle: FontStyle.italic),
                              ),
                            ],
                          ),
                          Text('${loco.locoMileage?.toStringAsFixed(1)} mi'),
                        ],
                      ),
                    ),
                  ),
                );
              }),
            ),
          ],
        ),
      ),
    );
  }
}