import 'package:flutter/material.dart';

import 'wind_arrow_icon.dart';

/// Kleine Wind-Anzeige direkt an einem Wegpunkt auf der Karte (HTML-
/// Demonstrator: divIcon in redrawMapLayers(), sichtbar wenn
/// showPerWaypointWind aktiv ist und fuer den Wegpunkt Wind geladen wurde).
class WindMarkerPill extends StatelessWidget {
  const WindMarkerPill({
    super.key,
    required this.speedMs,
    required this.dirFromDeg,
  });

  final double speedMs;
  final double dirFromDeg;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 7, vertical: 2),
      decoration: BoxDecoration(
        color: Colors.black.withValues(alpha: 0.82),
        borderRadius: BorderRadius.circular(10),
        border: Border.all(color: Colors.white.withValues(alpha: 0.4)),
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          WindArrowIcon(dirFromDeg: dirFromDeg, size: 15),
          const SizedBox(width: 4),
          Text(
            '${speedMs.round()} m/s',
            style: const TextStyle(color: Colors.white, fontSize: 11),
          ),
        ],
      ),
    );
  }
}