import 'package:flutter/material.dart';
import 'package:frontend_eccp_mobile/app/core/constants/constants.dart';
import 'package:iconsax_plus/iconsax_plus.dart';

class AppBottomNav extends StatelessWidget {
  const AppBottomNav({
    required this.currentIndex,
    required this.onTap,
    super.key,
  });

  final int currentIndex;
  final ValueChanged<int> onTap;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(
        top: AppSizes.s12,
        bottom: MediaQuery.of(context).viewPadding.bottom,
      ),
      decoration: BoxDecoration(
        border: Border(
          top: BorderSide(color: AppColors.neutral200),
        ),
        color: Colors.white,
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          _NavItem(
            0,
            currentIndex,
            IconsaxPlusLinear.home_2,
            IconsaxPlusBold.home_2,
            'Beranda',
            onTap,
          ),
          _NavItem(
            1,
            currentIndex,
            IconsaxPlusLinear.document,
            IconsaxPlusBold.document,
            'Berkas',
            onTap,
          ),
          _NavItem(
            2,
            currentIndex,
            IconsaxPlusLinear.setting,
            IconsaxPlusBold.setting,
            'Pengaturan',
            onTap,
          ),
        ],
      ),
    );
  }
}

class _NavItem extends StatelessWidget {
  const _NavItem(
    this.index,
    this.currentIndex,
    this.icon,
    this.activeIcon,
    this.label,
    this.onTap,
  );

  final int index;
  final int currentIndex;
  final IconData icon;
  final IconData activeIcon;
  final String label;
  final ValueChanged<int> onTap;

  bool get isActive => index == currentIndex;

  @override
  Widget build(BuildContext context) {
    final activeColor = AppColors.primary900;
    final inactiveColor = AppColors.neutral500;

    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: () => onTap(index),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(
            isActive ? activeIcon : icon,
            size: AppIconSizes.lg,
            color: AppColors.primary900,
          ),
          AppSpacing.h4,
          Text(
            label,
            style: AppTextStyles.badge.copyWith(
              fontSize: 11,
              color: isActive ? activeColor : inactiveColor,
            ),
          ),
        ],
      ),
    );
  }
}
