import 'package:flutter/material.dart';
import 'package:sigap/src/features/personalization/presentasion/pages/settings/widgets/base_detail_screen.dart';

class TextSizeSettingsScreen extends StatefulWidget {
  const TextSizeSettingsScreen({super.key});

  @override
  _TextSizeSettingsScreenState createState() => _TextSizeSettingsScreenState();
}

class _TextSizeSettingsScreenState extends State<TextSizeSettingsScreen> {
  double _currentTextSize = 1.0; // 1.0 is default

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);

    return BaseDetailScreen(
      title: 'Text Size',
      content: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildSectionHeader('Adjust Text Size'),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20.0),
            child: Text(
              'Sample text at current size',
              style: theme.textTheme.bodyLarge?.copyWith(
                fontSize: 16 * _currentTextSize,
              ),
            ),
          ),
          SizedBox(height: 20),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20.0),
            child: Row(
              children: [
                Text('A', style: theme.textTheme.bodyMedium),
                Expanded(
                  child: SliderTheme(
                    data: SliderTheme.of(context).copyWith(
                      activeTrackColor: theme.primaryColor,
                      thumbColor: theme.primaryColor,
                      inactiveTrackColor: theme.primaryColor.withOpacity(0.2),
                    ),
                    child: Slider(
                      value: _currentTextSize,
                      min: 0.8,
                      max: 1.4,
                      divisions: 6,
                      onChanged: (value) {
                        setState(() {
                          _currentTextSize = value;
                        });
                      },
                    ),
                  ),
                ),
                Text('A', style: theme.textTheme.titleLarge),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(20.0),
            child: Text(
              'This is a preview of how text will appear throughout the app. '
              'Adjust the slider to make text smaller or larger.',
              style: theme.textTheme.bodyMedium?.copyWith(
                fontSize: 14 * _currentTextSize,
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildSectionHeader(String title) {
    final theme = Theme.of(context);

    return Container(
      padding: EdgeInsets.fromLTRB(20, 30, 20, 10),
      child: Text(
        title,
        style: theme.textTheme.titleMedium?.copyWith(
          fontWeight: FontWeight.w600,
        ),
      ),
    );
  }
}
