import 'package:flutter/material.dart';
import 'package:miaoji_zhang/shared/theme/app_theme.dart';
import 'package:miaoji_zhang/shared/theme/theme_store.dart';
import 'package:miaoji_zhang/shared/widgets/app_controls.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('外观设置')),
      body: ListView(
        padding: const EdgeInsets.fromLTRB(16, 8, 16, 24),
        children: [
          Card(
            child: Padding(
              padding: const EdgeInsets.all(16),
              child: AnimatedBuilder(
                animation: ThemeStore.instance,
                builder: (context, _) => Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text(
                      '显示模式',
                      style: TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.w800,
                      ),
                    ),
                    const SizedBox(height: 5),
                    Text(
                      '跟随系统会随手机的浅色与深色设置自动切换。',
                      style: TextStyle(color: context.jz.text2, fontSize: 11.5),
                    ),
                    const SizedBox(height: 14),
                    JzSegmentedControl<JzThemePreference>(
                      value: ThemeStore.instance.preference,
                      options: const [
                        JzOption(
                          value: JzThemePreference.system,
                          label: '跟随系统',
                        ),
                        JzOption(value: JzThemePreference.light, label: '浅色'),
                        JzOption(value: JzThemePreference.dark, label: '深色'),
                      ],
                      onChanged: ThemeStore.instance.setPreference,
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}