import 'package:flutter/cupertino.dart';
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';

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

  @override
  Widget build(BuildContext context) => Column(
        children: [
          Text(
            'Portfolio Cards',
            style: Theme.of(context).textTheme.titleMedium,
          ),
          const Gap(20),
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              PortfolioCard(
                logo: const FlutterLogo(
                  size: 50,
                ),
                projectName: const TextWrapper('Flutter'),
                subtitle: const TextWrapper('Mobile / Web / Macos.'),
                description: const TextWrapper(
                    'Cupidatat reprehenderit aliqua eiusmod Lorem. '
                    'Qui ipsum id ea ea nulla labore aute ullamco aute '
                    'quis elit ut amet velit. Incididunt fugiat proident '
                    'proident deserunt tempor Lorem cillum qui do '),
                ctas: [
                  CupertinoButton(
                    color: Theme.of(context).primaryColor,
                    onPressed: () {},
                    child: const Text('En savoir plus >'),
                  ),
                ],
                assets: [
                  Image.asset(
                    'assets/images/mockup_1.png',
                    alignment: Alignment.topCenter,
                    fit: BoxFit.cover,
                  )
                ],
                keyword: const [
                  TextWrapper('UI Design'),
                  TextWrapper('Developpement'),
                  TextWrapper('Deploiement')
                ],
              ),
              const Gap(20),
              PortfolioCard(
                showImagesOnTop: true,
                logo: const FlutterLogo(
                  size: 50,
                ),
                projectName: const TextWrapper('Flutter'),
                subtitle: const TextWrapper('Mobile / Web / Macos.'),
                description: const TextWrapper(
                    'Cupidatat reprehenderit aliqua eiusmod Lorem. '
                    'Qui ipsum id ea ea nulla labore aute ullamco aute '
                    'quis elit ut amet velit. Incididunt fugiat proident '
                    'proident deserunt tempor Lorem cillum qui do '),
                ctas: [
                  CupertinoButton(
                    color: Theme.of(context).primaryColor,
                    onPressed: () {},
                    child: const Text('En savoir plus >'),
                  ),
                ],
                assets: [
                  Image.asset(
                    'assets/images/mockup_1.png',
                    alignment: Alignment.topCenter,
                    fit: BoxFit.cover,
                  )
                ],
              )
            ],
          ),
          const Gap(20),
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              PortfolioCard(
                logo: const FlutterLogo(
                  size: 50,
                ),
                projectName: const TextWrapper('Flutter'),
                subtitle: const TextWrapper('Mobile / Web / Macos.'),
                description: const TextWrapper(
                    'Cupidatat reprehenderit aliqua eiusmod Lorem. '
                    'Qui ipsum id ea ea nulla labore aute ullamco aute '
                    'quis elit ut amet velit. Incididunt fugiat proident '
                    'proident deserunt tempor Lorem cillum qui do '),
                ctas: [
                  CupertinoButton(
                    color: Theme.of(context).primaryColor,
                    onPressed: () {},
                    child: const Text('En savoir plus >'),
                  ),
                ],
                assets: [
                  Image.asset(
                    'assets/images/mockup_1.png',
                    alignment: Alignment.topCenter,
                    fit: BoxFit.cover,
                  ),
                  Image.asset(
                    'assets/images/mockup_1.png',
                    alignment: Alignment.topCenter,
                    fit: BoxFit.cover,
                  )
                ],
                keyword: const [
                  TextWrapper('UI Design'),
                  TextWrapper('Developpement'),
                  TextWrapper('Deploiement')
                ],
              ),
              const Gap(20),
              PortfolioCard(
                logo: const FlutterLogo(
                  size: 50,
                ),
                projectName: const TextWrapper(
                  'Flutter',
                  gradientColors: MultiColor([
                    Colors.blue,
                    Colors.green,
                  ]),
                ),
                subtitle: const TextWrapper('Mobile / Web / Macos.'),
                description: const TextWrapper(
                    'Cupidatat reprehenderit aliqua eiusmod Lorem. '
                    'Qui ipsum id ea ea nulla labore aute ullamco aute '
                    'quis elit ut amet velit. Incididunt fugiat proident '
                    'proident deserunt tempor Lorem cillum qui do '),
                ctas: [
                  CupertinoButton(
                    color: Theme.of(context).primaryColor,
                    onPressed: () {},
                    child: const Text('En savoir plus >'),
                  ),
                ],
                assets: [
                  Image.asset(
                    'assets/images/mockup_1.png',
                    alignment: Alignment.topCenter,
                    fit: BoxFit.cover,
                  ),
                  Image.asset(
                    'assets/images/mockup_2.png',
                    alignment: Alignment.topCenter,
                    fit: BoxFit.cover,
                  ),
                  Image.asset(
                    'assets/images/mockup_1.png',
                    alignment: Alignment.topCenter,
                    fit: BoxFit.cover,
                  )
                ],
                keyword: const [
                  TextWrapper('UI Design'),
                  TextWrapper('Developpement'),
                  TextWrapper('Deploiement')
                ],
              ),
            ],
          ),
        ],
      );
}
