import 'package:flutter/material.dart';
import '../../ui/theme/app_theme.dart';

class AyuelSegmentedEnergy extends StatelessWidget {
  final String selected;
  final Function(String) onChanged;

  const AyuelSegmentedEnergy({
    super.key,
    required this.selected,
    required this.onChanged,
  });

  @override
  Widget build(BuildContext context) {
    const options = ["Low", "Okay", "High"];

    return Container(
      padding: const EdgeInsets.all(4),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(100),
        border: Border.all(color: AppTheme.surface),
      ),
      child: Row(
        children: options.map((option) {
          final isSelected = selected == option;
          return Expanded(
            child: GestureDetector(
              onTap: () => onChanged(option),
              child: AnimatedContainer(
                duration: const Duration(milliseconds: 200),
                padding: const EdgeInsets.symmetric(vertical: 12),
                decoration: BoxDecoration(
                  color: isSelected
                      ? _getColorForOption(option)
                      : Colors.transparent,
                  borderRadius: BorderRadius.circular(100),
                ),
                alignment: Alignment.center,
                child: Text(
                  option,
                  style: AppTheme.textTheme.bodyMedium?.copyWith(
                    color: isSelected
                        ? AppTheme.textMain
                        : AppTheme.textSecondary,
                    fontWeight: isSelected ? FontWeight.w600 : FontWeight.w400,
                  ),
                ),
              ),
            ),
          );
        }).toList(),
      ),
    );
  }

  Color _getColorForOption(String option) {
    switch (option) {
      case "Low":
        return AppTheme.energyLow;
      case "Okay":
        return AppTheme.energyMed;
      case "High":
        return AppTheme.energyHigh;
      default:
        return AppTheme.primary;
    }
  }
}
