import 'package:flutter/material.dart';
import 'package:userfront/i18n.dart';

import '../theme/theme_scope.dart';

class ThemeToggleButton extends StatelessWidget {
  const ThemeToggleButton({super.key, this.compact = false});

  final bool compact;

  @override
  Widget build(BuildContext context) {
    Localizations.localeOf(context);
    final controller = ThemeScope.of(context);

    return ValueListenableBuilder<ThemeMode>(
      valueListenable: controller,
      builder: (context, mode, _) {
        final isLight = mode == ThemeMode.light;
        final icon = isLight
            ? Icons.light_mode_outlined
            : Icons.dark_mode_outlined;
        final label = isLight
            ? tr('ui.common.theme_light', fallback: 'Light')
            : tr('ui.common.theme_dark', fallback: 'Dark');
        final tooltip = tr('ui.common.theme_toggle', fallback: '테마 전환');

        if (compact) {
          return IconButton(
            tooltip: tooltip,
            onPressed: () => controller.toggle(),
            icon: Icon(icon),
          );
        }

        return OutlinedButton.icon(
          onPressed: () => controller.toggle(),
          icon: Icon(icon, size: 18),
          label: Text(label),
        );
      },
    );
  }
}
