import 'package:wanisdriver/utils/colors.dart';
import 'package:wanisdriver/widgets/custom_text.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutter_lucide/flutter_lucide.dart';

import '../Provider/language_provider.dart';
import '../config/constants/arabe.dart' as Language;

class CustomBottomNavigationBar extends StatelessWidget {
  final int currentIndex;
  final ValueChanged<int> onTap;

  CustomBottomNavigationBar({required this.currentIndex, required this.onTap});

  @override
  Widget build(BuildContext context) {
    return BottomAppBar(
      color: Theme.of(context).brightness == Brightness.dark ? AppColors.blackBackgroundColor: AppColors.whiteBackgroundColor, // Background color
      child: SizedBox(
        height: 80.0, // Increased height to ensure proper visual balance and spacing
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            _buildNavBarItem(
              icon: LucideIcons.inbox,
              index: 0,
              label: "Home",
              context: context
            ),
            _buildNavBarItem(
              icon: LucideIcons.bell,
              index: 1,
              label: "News",
              context: context
            ),
            _buildNavBarItem(
              icon: LucideIcons.car_front,
              index: 2,
              label: "Trips",
              context: context
            ),
            _buildNavBarItem(
              icon: LucideIcons.settings,
              index: 3,
              label: "Settings",
              context: context
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildNavBarItem({
    required IconData icon,
    required int index,
    required String label,
    context
  }) {
    final bool isSelected = index == currentIndex;
    return GestureDetector(
      onTap: () => onTap(index),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(icon,size: 28,
          color: isSelected ?
          Theme.of(context).brightness == Brightness.dark ? AppColors.whiteBackgroundColor : AppColors.thirdColor
              :Theme.of(context).brightness == Brightness.dark ? AppColors.darkSecondaryText :AppColors.navigationButtomColor,),
          const SizedBox(height: 4.0), // Adjusted spacing between icon and label
          Txt(
           text: label,
            style: TextStyle(
              fontSize: 10.0, // Increased font size for better readability
              fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
              fontFamily: languageSingleton.currentLangCode == Language.ar ? 'Baloo_Bhaijaan_2' : 'Poppins',
              overflow: TextOverflow.ellipsis,
              color: isSelected ?
              Theme.of(context).brightness == Brightness.dark ? AppColors.whiteBackgroundColor:AppColors.thirdColor
               :Theme.of(context).brightness == Brightness.dark ? AppColors.darkSecondaryText :AppColors.navigationButtomColor,
            ),
          ),
         // if (isSelected)
            // Padding(
            //   padding: const EdgeInsets.only(top: 4.0), // Adjusted padding above the underline for proper balance
            //   child: Container(
            //     width: 30.0, // Increased underline width for visual emphasis
            //     height: 3.0, // Increased height for more prominence
            //     decoration: BoxDecoration(
            //       color: const Color(0xFFFF6B00), // Orange color to match the reference
            //       borderRadius: BorderRadius.circular(1.5), // Slight rounding for a polished look
            //     ),
            //   ),
            // ),
        ],
      ),
    );
  }
}