import 'package:flutter/material.dart';
import 'package:localization/localization.dart';
import './account.dart' as account;
import './about.dart' as about;
import './app.dart' as app;

Widget settings(context) {
  final List<Widget> categories = [
    SettingsPanel(
        title: "account-settings".i18n(),
        content: const account.AccountSettings()),
    SettingsPanel(
        title: "app-settings".i18n(), content: const app.AppSettings()),
    SettingsPanel(
      title: "about".i18n(),
      content: const about.AboutSettings(),
    )
  ];
  return ListView.separated(
      itemBuilder: (context, index) {
        return categories[index];
      },
      separatorBuilder: (context, index) {
        return const Divider(
          height: 0,
          color: Colors.transparent,
        );
      },
      itemCount: categories.length);
}

class SettingsPanel extends StatelessWidget {
  const SettingsPanel({
    Key? key,
    required this.title,
    required this.content,
  }) : super(key: key);

  final String title;
  final Widget content;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(24.0),
      child: Container(
        decoration: BoxDecoration(
          color: Theme.of(context).colorScheme.surface,
          border: Border.all(color: Theme.of(context).colorScheme.secondary),
          borderRadius: BorderRadius.circular(8),
        ),
        padding: const EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              title,
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            content,
          ],
        ),
      ),
    );
  }
}