import 'package:flutter/material.dart';
import '../providers/mqtt_provider.dart';

class ConnectionStatus extends StatelessWidget {
  final MQTTProvider provider;

  const ConnectionStatus({super.key, required this.provider});

  @override
  Widget build(BuildContext context) {
    Color statusColor;
    IconData statusIcon;

    switch (provider.connectionStatus) {
      case "Connected":
        statusColor = Colors.green;
        statusIcon = Icons.check_circle;
        break;
      case "Connecting...":
        statusColor = Colors.orange;
        statusIcon = Icons.hourglass_empty;
        break;
      default:
        statusColor = Colors.red;
        statusIcon = Icons.error;
    }

    return Container(
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        color: statusColor.withOpacity(0.1),
        borderRadius: BorderRadius.circular(8),
        border: Border.all(color: statusColor, width: 1),
      ),
      child: Row(
        children: [
          Icon(statusIcon, color: statusColor),
          const SizedBox(width: 8),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'Status Koneksi MQTT',
                  style: TextStyle(
                    fontSize: 12,
                    color: Colors.grey[600],
                  ),
                ),
                Text(
                  provider.connectionStatus,
                  style: TextStyle(
                    fontSize: 14,
                    fontWeight: FontWeight.bold,
                    color: statusColor,
                  ),
                ),
              ],
            ),
          ),
          if (provider.connectionStatus != "Connected")
            TextButton.icon(
              onPressed: () => provider.connect(),
              icon: const Icon(Icons.refresh, size: 16),
              label: const Text('Hubungkan'),
              style: TextButton.styleFrom(
                foregroundColor: statusColor,
              ),
            ),
        ],
      ),
    );
  }
}