import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Магизин у дома'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final Color _color = Color(0xFF9878D7);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: _color,
        title: Text(widget.title),
      ),
      body: const MyWidget(),
    );
  }
}

class _CardDate {
  final String text;
  final String description;
  final IconData icon;
  final String? image;

  _CardDate(this.text,
      {required this.description,
      this.icon = Icons.ac_unit_outlined,
      this.image});
}

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

  @override
  Widget build(BuildContext context) {
    final data = [
      _CardDate(
        'First',
        description: "This first card",
        icon: Icons.ice_skating,
        image:
            'https://i.pinimg.com/originals/6a/11/e7/6a11e75396a475e69ccf36eb53459645.png',
      ),
      _CardDate(
        'Second',
        description: "This second card",
        icon: Icons.ac_unit_rounded,
        image:
            'https://mir-s3-cdn-cf.behance.net/project_modules/2800_opt_1/56da13103680399.5f5288873fac6.png',
      ),
      _CardDate(
        'Third',
        description: "This third card",
        icon: Icons.abc_sharp,
        image:
            'https://avatars.mds.yandex.net/i?id=200973d41be50944574dc1ef6f59aec5acd569de-7549266-images-thumbs&n=13',
      ),
    ];

    final markerDate = [
      _MarketData('100₽', "Банан", '80₽ ', '100 г',
          image:
              'https://main-cdn.sbermegamarket.ru/big1/hlr-system/428/425/752/325/184/4/100028179877b0.jpg'),
      _MarketData('180₽', "Мандарины", '160₽ ', '100 г',
          image:
              'https://main-cdn.sbermegamarket.ru/big2/hlr-system/105/621/149/532/518/46/100028180607b0.jpg'),
      _MarketData('140₽', "Сыр", '120₽ ', '100 г',
          image:
              'https://main-cdn.sbermegamarket.ru/big2/hlr-system/-21/355/242/874/191/753/100026606392b0.jpg'),
      _MarketData('188₽', "Крабовые палочки Aro", '159₽ ', '500 г',
          image:
              'https://main-cdn.sbermegamarket.ru/big2/hlr-system/208/792/956/332/518/55/100028195753b0.jpg'),
      _MarketData('100₽', "Черноголовка Кола", '99₽ ', '2 л',
          image:
          'https://main-cdn.sbermegamarket.ru/big2/hlr-system/822/548/713/816/182/3/100032947636b0.jpg'),
    ];

    return Center(
      child: SingleChildScrollView(
        child: Wrap(
          children: markerDate
              .map((x) => SizedBox(
            width: MediaQuery.of(context).size.width / 2 - 16,
            child: _MarketCard.formDate(x),
          ))
              .toList(),
        ),
      ),
    );
  }
}

class _MarketData {
  final String price;
  final String name;
  final String? discount;
  final String size;
  final String? image;

  _MarketData(this.price, this.name, this.discount, this.size,
      {required this.image});
}

class _MarketCard extends StatelessWidget {
  final String price;
  final String name;
  final String? discount;
  final String size;
  final String? image;

  const _MarketCard(this.price, this.name, this.discount, this.size,
      {required this.image});

  factory _MarketCard.formDate(_MarketData date) =>
      _MarketCard(date.price, date.name, date.discount, date.size,
          image: date.image);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(10),
      margin: const EdgeInsets.all(4),
      decoration: BoxDecoration(
        color: Color(0xFFE5E4E2),
        borderRadius: BorderRadius.circular(16),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          ClipRRect(
            borderRadius: BorderRadius.circular(14),
            child: SizedBox(
              child: Image.network(
                image ?? '',
                fit: BoxFit.fill,
                errorBuilder: (_, __, ___) => const Placeholder(),
              ),
            ),
          ),
          Row(
            children: [
              Text(
                discount ?? '',
                style: TextStyle(fontSize: 26, color: Color(0xFFF1571E)),
              ),
              Text(
                price,
                style: TextStyle(
                    fontSize: 16, decoration: TextDecoration.lineThrough),
              ),
            ],
          ),
          Text(
            name,
            style: TextStyle(fontSize: 20),
          ),
          Text(
            size,
            style: TextStyle(fontSize: 18),
          ),
        ],
      ),
    );
  }
}

class _Card extends StatelessWidget {
  final String text;
  final IconData icon;
  final String description;
  final String? image;

  const _Card(this.text,
      {this.icon = Icons.earbuds_outlined,
      required this.description,
      this.image});

  factory _Card.formDate(_CardDate date) => _Card(
        date.text,
        description: date.description,
        icon: date.icon,
        image: date.image,
      );

  @override
  Widget build(BuildContext context) {
    return Container(
        margin: const EdgeInsets.only(top: 16, left: 10, right: 10),
        padding: const EdgeInsets.all(16),
        decoration: BoxDecoration(
          color: Colors.white54,
          borderRadius: BorderRadius.circular(20),
          border: Border.all(
            color: Colors.white70,
            width: 2,
          ),
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.5),
              spreadRadius: 4,
              offset: const Offset(0, 5),
              blurRadius: 8,
            )
          ],
        ),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            ClipRRect(
              borderRadius: BorderRadius.circular(15),
              child: SizedBox(
                height: 100,
                width: 100,
                child: Image.network(
                  image ?? '',
                  fit: BoxFit.fill,
                  errorBuilder: (_, __, ___) => const Placeholder(),
                ),
              ),
            ),
            Flexible(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(children: [
                  Text(
                    text,
                    style: Theme.of(context).textTheme.headlineLarge,
                  ),
                  Text(
                    description,
                  ),
                ]),
              ),
            ),
            Padding(
                padding: const EdgeInsets.only(left: 8.0), child: Icon(icon))
          ],
        ));
  }
}