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: Card(
          margin: EdgeInsets.symmetric(horizontal: 0, vertical: 8),
          child: Padding(
            padding: EdgeInsets.all(16),
            
            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'),
              ],
            ),
          ),
        ),
      );
    },
  ),
)
        
        ],
      )),
    );
  }
}