import 'package:flutter/material.dart';

/// Reusable 5-option emoji scale used for Energy, Positivity, Self-worth steps.
/// Tapping an option immediately calls [onSelected].
class StepScale extends StatelessWidget {
  final List<String> emojis;
  final List<String> labels;
  final List<Color> colors;
  final int? selected; // 1–5, null = nothing selected yet
  final ValueChanged<int> onSelected;

  const StepScale({
    super.key,
    required this.emojis,
    required this.labels,
    required this.colors,
    required this.selected,
    required this.onSelected,
  });

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: List.generate(5, (i) {
        final level = i + 1;
        final isSelected = selected == level;
        final color = colors[i];
        return GestureDetector(
          onTap: () => onSelected(level),
          child: AnimatedContainer(
            duration: const Duration(milliseconds: 200),
            curve: Curves.easeOut,
            width: isSelected ? 64 : 52,
            height: isSelected ? 64 : 52,
            decoration: BoxDecoration(
              color: isSelected
                  ? color.withValues(alpha: 0.15)
                  : Colors.transparent,
              shape: BoxShape.circle,
              border: Border.all(
                color: isSelected ? color : Colors.transparent,
                width: 2,
              ),
            ),
            child: Center(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text(
                    emojis[i],
                    style: TextStyle(fontSize: isSelected ? 30 : 24),
                  ),
                  if (isSelected)
                    Text(
                      labels[i],
                      style: TextStyle(
                        fontSize: 9,
                        color: color,
                        fontWeight: FontWeight.w600,
                      ),
                      overflow: TextOverflow.ellipsis,
                    ),
                ],
              ),
            ),
          ),
        );
      }),
    );
  }
}