import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../../../app_state.dart';
import '../../../services/localization_service.dart';

class HideZoomControlsSection extends StatelessWidget {
  const HideZoomControlsSection({super.key});

  @override
  Widget build(BuildContext context) {
    // Standard Pattern: Use AnimatedBuilder to respond to language/localization changes
    return AnimatedBuilder(
      animation: LocalizationService.instance,
      builder: (context, child) {
        final locService = LocalizationService.instance;
        final appState = context.watch<AppState>();

        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Bold Section Header (matches Keep Screen Awake, Proximity, etc.)
            Text(
              locService.t('settings.hideZoomControls'),
              style: Theme.of(context).textTheme.titleMedium,
            ),
            const SizedBox(height: 8),

            // The Functional Toggle
            SwitchListTile(
              contentPadding: EdgeInsets.zero, // Aligns switch text with the bold header
              title: Text(locService.t('hideZoomControls.title')),
              subtitle: Text(
                locService.t('hideZoomControls.subtitle'),
                style: const TextStyle(fontSize: 12),
              ),
              value: appState.hideZoomControls,
              onChanged: (bool value) {
                appState.setHideZoomControls(value);
              },
            ),
          ],
        );
      },
    );
  }
}