focusflow/lib/features/tasks/presentation/widgets/energy_selector.dart

import 'package:flutter/material.dart';

import '../../../../core/theme/app_colors.dart';

/// Three-option energy selector with icons.
///
/// Horizontal toggle:  Low  |  Medium  |  High
class EnergySelector extends StatelessWidget {
  final String value; // 'low', 'medium', 'high'
  final ValueChanged<String> onChanged;

  const EnergySelector({
    super.key,
    required this.value,
    required this.onChanged,
  });

  static const _options = [
    _EnergyOption(key: 'low', label: 'Low', icon: Icons.spa_outlined, color: AppColors.energyLow),
    _EnergyOption(key: 'medium', label: 'Medium', icon: Icons.bolt_outlined, color: AppColors.energyMedium),
    _EnergyOption(key: 'high', label: 'High', icon: Icons.local_fire_department_outlined, color: AppColors.energyHigh),
  ];

  @override
  Widget build(BuildContext context) {
    return Row(
      children: _options.map((opt) {
        final selected = value == opt.key;
        return Expanded(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 4),
            child: GestureDetector(
              onTap: () => onChanged(opt.key),
              child: AnimatedContainer(
                duration: const Duration(milliseconds: 200),
                curve: Curves.easeInOut,
                padding: const EdgeInsets.symmetric(vertical: 14),
                decoration: BoxDecoration(
                  color: selected ? opt.color.withAlpha(40) : Colors.transparent,
                  borderRadius: BorderRadius.circular(14),
                  border: Border.all(
                    color: selected ? opt.color : Colors.grey.withAlpha(60),
                    width: selected ? 2 : 1,
                  ),
                ),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Icon(opt.icon, color: selected ? opt.color : Colors.grey, size: 26),
                    const SizedBox(height: 4),
                    Text(
                      opt.label,
                      style: TextStyle(
                        fontSize: 13,
                        fontWeight: selected ? FontWeight.w700 : FontWeight.w500,
                        color: selected ? opt.color : Colors.grey,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      }).toList(),
    );
  }
}

class _EnergyOption {
  final String key;
  final String label;
  final IconData icon;
  final Color color;
  const _EnergyOption({
    required this.key,
    required this.label,
    required this.icon,
    required this.color,
  });
}