import 'package:didvan/config/design_config.dart';
import 'package:didvan/config/theme_data.dart';
import 'package:didvan/views/home/main/main_page_state.dart';
import 'package:didvan/views/home/main/widgets/banner.dart';
import 'package:didvan/views/widgets/didvan/text.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:provider/provider.dart';

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

  @override
  Widget build(BuildContext context) {
    final state = context.read<MainPageState>();
    return Column(
      children: [
        const MainPageBanner(
          isFirst: true,
        ),
        const SizedBox(height: 8),
        Stack(
          children: [
            Positioned(
              bottom: 13,
              child: Container(
                width: MediaQuery.of(context).size.width,
                height: 2,
                color: Theme.of(context).colorScheme.border,
              ),
            ),
            Center(
              child: Container(
                padding: const EdgeInsets.symmetric(horizontal: 12),
                color: Theme.of(context).colorScheme.background,
                child: DidvanText(
                  'دیدوان در یک نگاه',
                  color: Theme.of(context).colorScheme.title,
                  style: Theme.of(context).textTheme.titleMedium,
                ),
              ),
            ),
          ],
        ),
        Padding(
          padding: const EdgeInsets.only(
            left: 20,
            right: 20,
            top: 16,
          ),
          child: Wrap(
            alignment: WrapAlignment.center,
            children: state.categories
                .map(
                  (e) => SizedBox(
                    width: (MediaQuery.of(context).size.width - 40) / 4,
                    child: Column(
                      children: [
                        Container(
                          width: 56,
                          height: 56,
                          padding: const EdgeInsets.all(8),
                          decoration: BoxDecoration(
                            borderRadius: DesignConfig.lowBorderRadius,
                            border: Border.all(
                              color:
                                  Theme.of(context).colorScheme.focusedBorder,
                            ),
                          ),
                          child: SvgPicture.asset(e.asset!),
                        ),
                        const SizedBox(height: 4),
                        DidvanText(
                          e.label,
                          color: Theme.of(context).colorScheme.title,
                          style: Theme.of(context).textTheme.labelSmall,
                          fontWeight: FontWeight.w600,
                        ),
                        const SizedBox(height: 12),
                      ],
                    ),
                  ),
                )
                .toList(),
          ),
        ),
      ],
    );
  }
}