import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:shadcn_ui/shadcn_ui.dart';

import '../../../common/theme/app_text.dart';
import '../../../common/theme/spacing.dart';

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

  @override
  Widget build(BuildContext context) {
    final cs = ShadTheme.of(context).colorScheme;
    const samples = <_Sample>[
      _Sample('appTitle', AppText.appTitle),
      _Sample('sectionTitle', AppText.sectionTitle),
      _Sample('cardTitle', AppText.cardTitle),
      _Sample('listTitle', AppText.listTitle),
      _Sample('body', AppText.body),
      _Sample('meta', AppText.meta),
      _Sample('chip', AppText.chip),
      _Sample('badge', AppText.badge),
    ];

    return Scaffold(
      appBar: AppBar(
        backgroundColor: cs.background,
        surfaceTintColor: Colors.transparent,
        elevation: 0,
        scrolledUnderElevation: 0,
        title: Text(
          'Typography',
          style: TextStyle(
            fontSize: 17,
            fontWeight: FontWeight.w700,
            color: cs.foreground,
          ),
        ),
        leading: IconButton(
          icon: Icon(Icons.arrow_back_ios_new, color: cs.foreground, size: 18),
          onPressed: () => context.pop(),
        ),
      ),
      body: ListView(
        padding: const EdgeInsets.fromLTRB(Spacing.page, 8, Spacing.page, 24),
        children: [
          for (final sample in samples) ...[
            Container(
              decoration: BoxDecoration(
                color: cs.card,
                border: Border.all(color: cs.border),
                borderRadius: BorderRadius.circular(Spacing.radiusBase),
              ),
              clipBehavior: Clip.antiAlias,
              padding: const EdgeInsets.all(16),
              margin: const EdgeInsets.only(bottom: Spacing.cardGap),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    sample.name,
                    style: AppText.meta.copyWith(color: cs.mutedForeground),
                  ),
                  const SizedBox(height: 8),
                  Text('金值 / Jinzhi / Typography', style: sample.style),
                ],
              ),
            ),
          ],
        ],
      ),
    );
  }
}

class _Sample {
  const _Sample(this.name, this.style);

  final String name;
  final TextStyle style;
}