import 'package:flutter/material.dart';

/// A widget that displays a navigation card with different modes of transportation.
Widget navigationCard(
  BuildContext context, {
  required List<Map<String, dynamic>> modes,
  double height = 260,
}) {
  int currentIndex = 0;

  return Container(
    height: height,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(16),
      color: Colors.white,
      boxShadow: const [
        BoxShadow(
          blurRadius: 8,
          color: Colors.black12,
          offset: Offset(0, 4),
        ),
      ],
    ),
    child: StatefulBuilder(
      builder: (context, setInnerState) {
        return Column(
          children: [
            // 路线图片
            ClipRRect(
              borderRadius:
                  const BorderRadius.vertical(top: Radius.circular(16)),
              child: AnimatedSwitcher(
                duration: const Duration(milliseconds: 300),
                child: Image.network(
                  modes[currentIndex]["image"] as String,
                  key: ValueKey<String>(modes[currentIndex]["ntype"] as String),
                  height: 160,
                  width: double.infinity,
                  fit: BoxFit.cover,
                ),
              ),
            ),

            // 导航方式切换按钮
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 4),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: List.generate(modes.length, (index) {
                  final isSelected = index == currentIndex;
                  return GestureDetector(
                    onTap: () {
                      setInnerState(() => currentIndex = index);
                    },
                    child: SizedBox(
                      width: 50,
                      child: Text(
                        modes[index]["ntype"] as String,
                        style: TextStyle(
                          color: isSelected ? Colors.blue : Colors.black87,
                          fontSize: 12,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                    ),
                  );
                }),
              ),
            ),

            // 距离和耗时
            Padding(
              padding: const EdgeInsets.all(8),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text('距离：${modes[currentIndex]["distance"]}',
                      style: const TextStyle(fontSize: 12, color: Colors.blue)),
                  Container(
                    decoration: BoxDecoration(
                      shape: BoxShape.circle, // 👈 圆形背景
                      color: Colors.blue,
                    ),
                    child: Icon(Icons.turn_left,
                        color: Colors.white, // 👈 圆形图标
                        size: 20),
                  )
                ],
              ),
            ),
          ],
        );
      },
    ),
  );
}