import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:wyatt_ui_components/wyatt_ui_components.dart';
import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
import 'package:wyatt_ui_kit_example/demo_page.dart';

class Bars extends DemoPage {
  const Bars({super.key});

  @override
  Widget build(BuildContext context) => ListView(
        cacheExtent: 1000,
        children: [
          const Gap(20),
          TopAppBar(
            leading: Padding(
              padding: const EdgeInsets.all(8),
              child: Image.asset('assets/images/studio_logo.png'),
            ),
            title: 'Wyatt Studio'.wrap(
              gradientColors: const MultiColor(
                [
                  Color.fromRGBO(57, 167, 254, 1),
                  Color.fromRGBO(71, 94, 241, 1),
                ],
              ),
            ),
            actions: [
              IconButton(onPressed: () {}, icon: const Icon(Icons.menu))
            ],
          ),
          const Gap(20),
          TopAppBar(
            leading: Padding(
              padding: const EdgeInsets.all(8),
              child: Image.asset('assets/images/studio_logo.png'),
            ),
            title: 'Wyatt Studio'.wrap(
              gradientColors: const MultiColor(
                [
                  Color.fromRGBO(57, 167, 254, 1),
                  Color.fromRGBO(71, 94, 241, 1),
                ],
              ),
            ),
            expandedWidget: const [
              ListTile(
                title: Text('Votre programme'),
              ),
              ListTile(
                title: Text('Votre programme'),
              ),
              ListTile(
                title: Text('Votre programme'),
              )
            ],
            actions: [
              IconButton(
                onPressed: () {},
                icon: const Icon(Icons.clear),
              )
            ],
          ),
          const Gap(20),
          TopNavigationBar(
            leading: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: Image.asset('assets/images/studio_long_logo.png'),
            ),
            actions: [
              Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: 20, vertical: 25),
                child: FlatButton(
                  label: 'Estimer mon projet'.wrap(),
                ),
              ),
            ],
            navigationItems: [
              'ACCEUIL'.wrap(),
              'VOTRE PROGRAMME'.wrap(),
              'LE STUDIO'.wrap(),
              'SAVOIR FAIRE'.wrap()
            ].whereType<TextWrapper>().toList(),
          ),
        ],
      );

  @override
  String get title => 'Bars';
}
