import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

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

/// The full three-way Light/Dark/System control. The top bar's quick
/// sun/moon icon (`NavRailShell`) only ever toggles between explicit
/// light/dark — this is the one place "follow system" can be chosen.
class ThemeToggle extends ConsumerWidget {
  const ThemeToggle({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final mode = ref.watch(themeModeControllerProvider);

    return SegmentedButton<ThemeMode>(
      showSelectedIcon: false,
      segments: const [
        ButtonSegment(value: ThemeMode.light, label: Text('Light'), icon: Icon(Icons.light_mode_outlined, size: 16)),
        ButtonSegment(value: ThemeMode.dark, label: Text('Dark'), icon: Icon(Icons.dark_mode_outlined, size: 16)),
        ButtonSegment(
          value: ThemeMode.system,
          label: Text('System'),
          icon: Icon(Icons.brightness_auto_outlined, size: 16),
        ),
      ],
      selected: {mode},
      onSelectionChanged: (selected) =>
          ref.read(themeModeControllerProvider.notifier).setThemeMode(selected.first),
    );
  }
}