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

import 'package:provider/provider.dart';

class LeaderboardPanel 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(
              "Leaderboard",
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
                decoration: TextDecoration.underline,
              ),
            ),
            Column(
              children: List.generate(
                data.homepageStats?.leaderboard.length ?? 0,
                (index) {
                  final leaderboardEntry =
                      data.homepageStats!.leaderboard[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: [
                            Text.rich(
                              TextSpan(
                                children: [
                                  TextSpan(
                                    text: '${index + 1}. ',
                                    style: TextStyle(
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                  TextSpan(
                                    text: '${leaderboardEntry.userFullName}',
                                  ),
                                ],
                              ),
                            ),
                            Text(
                              '${leaderboardEntry.mileage.toStringAsFixed(1)} mi',
                            ),
                          ],
                        ),
                      ),
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}