import 'package:flutter/material.dart';

class AppBottomNavigation extends StatelessWidget {
  final int? selectedIndex;
  final Function(int) onItemTapped;
  final bool isDesktop;

  const AppBottomNavigation({
    super.key,
    required this.selectedIndex,
    required this.onItemTapped,
    this.isDesktop = false,
  });

  @override
  Widget build(BuildContext context) {
    if (isDesktop) return const SizedBox.shrink();

    return Container(
      color: Colors.white,
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
      child: Row(
        children: [
          // Tables Tab
          GestureDetector(
            onTap: () => onItemTapped(0),
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
              decoration: BoxDecoration(
                color:
                    selectedIndex == 0
                        ? Colors.green.shade700
                        : Colors.transparent,
                borderRadius: BorderRadius.circular(20),
              ),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Icon(
                    Icons.table_restaurant,
                    color:
                        selectedIndex == 0
                            ? Colors.white
                            : Colors.grey.shade600,
                    size: 16,
                  ),
                  const SizedBox(width: 6),
                  Text(
                    'Tables',
                    style: TextStyle(
                      color:
                          selectedIndex == 0
                              ? Colors.white
                              : Colors.grey.shade600,
                      fontWeight:
                          selectedIndex == 0
                              ? FontWeight.w500
                              : FontWeight.normal,
                    ),
                  ),
                ],
              ),
            ),
          ),

          const SizedBox(width: 20),

          // Commandes Tab
          GestureDetector(
            onTap: () => onItemTapped(1),
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
              decoration: BoxDecoration(
                color:
                    selectedIndex == 1
                        ? Colors.green.shade700
                        : Colors.transparent,
                borderRadius: BorderRadius.circular(20),
              ),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Icon(
                    Icons.receipt_long_outlined,
                    color:
                        selectedIndex == 1
                            ? Colors.white
                            : Colors.grey.shade600,
                    size: 16,
                  ),
                  const SizedBox(width: 6),
                  Text(
                    'Commandes',
                    style: TextStyle(
                      color:
                          selectedIndex == 1
                              ? Colors.white
                              : Colors.grey.shade600,
                      fontWeight:
                          selectedIndex == 1
                              ? FontWeight.w500
                              : FontWeight.normal,
                    ),
                  ),
                ],
              ),
            ),
          ),

          const SizedBox(width: 20),

          // Catégories Tab (Corrigé)
          GestureDetector(
            onTap: () => onItemTapped(2), // Index 2 pour catégories
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
              decoration: BoxDecoration(
                color:
                    selectedIndex == 2 // Index 2 pour catégories
                        ? Colors.green.shade700
                        : Colors.transparent,
                borderRadius: BorderRadius.circular(20),
              ),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Icon(
                    Icons.category_outlined, // Icône plus appropriée pour catégories
                    color:
                        selectedIndex == 2
                            ? Colors.white
                            : Colors.grey.shade600,
                    size: 16,
                  ),
                  const SizedBox(width: 6),
                  Text(
                    'Catégories',
                    style: TextStyle(
                      color:
                          selectedIndex == 2
                              ? Colors.white
                              : Colors.grey.shade600,
                      fontWeight:
                          selectedIndex == 2
                              ? FontWeight.w500
                              : FontWeight.normal,
                    ),
                  ),
                ],
              ),
            ),
          ),

          const Spacer(),

          // User Profile Section
          _buildUserProfile(),
        ],
      ),
    );
  }

  Widget _buildUserProfile() {
    return Row(
      children: [
        Icon(Icons.person_outline, color: Colors.grey.shade600, size: 16),
        const SizedBox(width: 6),
        Text('Chef Pierre', style: TextStyle(color: Colors.grey.shade600)),
        const SizedBox(width: 8),
        Icon(Icons.expand_more, color: Colors.grey.shade600, size: 16),
      ],
    );
  }
}