import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import '../theme/app_theme.dart';
import '../screens/log/log_screen.dart';

class QuickLogButtons extends StatelessWidget {
  const QuickLogButtons({super.key});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        _buildQuickButton(
          icon: Icons.water_drop_outlined,
          label: 'Period',
          color: AppColors.menstrualPhase,
          onTap: () => _navigateToLog(context),
        ),
        const SizedBox(width: 12),
        _buildQuickButton(
          icon: Icons.emoji_emotions_outlined,
          label: 'Mood',
          color: AppColors.softGold,
          onTap: () => _navigateToLog(context),
        ),
        const SizedBox(width: 12),
        _buildQuickButton(
          icon: Icons.flash_on_outlined,
          label: 'Energy',
          color: AppColors.follicularPhase,
          onTap: () => _navigateToLog(context),
        ),
        const SizedBox(width: 12),
        _buildQuickButton(
          icon: Icons.healing_outlined,
          label: 'Symptoms',
          color: AppColors.lavender,
          onTap: () => _navigateToLog(context),
        ),
      ],
    );
  }

  void _navigateToLog(BuildContext context) {
    // Navigate to the Log tab (index 2) of HomeScreen if possible, 
    // but since we are inside a tab, we can't easily switch the parent tab index without context. Using a provider or callback would be best.
    // For now, let's push the LogScreen as a new route for "Quick Log" feel.
    // Ideally we would switch the BottomNavBar index.
    
    Navigator.of(context).push(
      MaterialPageRoute(builder: (context) => const Scaffold(
        appBar: PreferredSize(
            preferredSize: Size.fromHeight(0), 
            child: SizedBox.shrink()
        ),
        body: LogScreen()
      )),
    );
  }

  Widget _buildQuickButton({
    required IconData icon,
    required String label,
    required Color color,
    required VoidCallback onTap,
  }) {
    return Expanded(
      child: GestureDetector(
        onTap: onTap,
        child: Container(
          padding: const EdgeInsets.symmetric(vertical: 16),
          decoration: BoxDecoration(
            color: color.withOpacity(0.15),
            borderRadius: BorderRadius.circular(12),
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(icon, color: color, size: 24),
              const SizedBox(height: 6),
              Text(
                label,
                style: GoogleFonts.outfit(
                  fontSize: 11,
                  fontWeight: FontWeight.w500,
                  color: color,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}