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.green),
        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> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.deepPurple.shade200,
        title: Text(widget.title),
      ),
      body: const MyWidget(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final cardsData = [
      _CardData(
        title: 'Title 1',
        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
        imageUrl: 'https://i.imgur.com/a9WA68S.png',
      ),
      _CardData(
        title: 'Title 2',
        description: 'Lorem ipsum dolor sit amet',
        icon: Icons.add_chart_outlined,
          imageUrl: 'https://i.imgur.com/dAUcs6I.png',
      ),
      _CardData(
        title: 'Title 3',
        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor',
        imageUrl: 'https://i.imgur.com/m2FhVAK.png',
      ),
    ];

    return Center(
      child: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: cardsData.map((e) => _Card.fromData(e)).toList(),
        ),
      ),
    );
  }
}

class _CardData {
  final String title;
  final String description;
  final IconData icon;
  final String? imageUrl;

  _CardData({
    required this.title,
    required this.description,
    this.icon = Icons.adb,
    this.imageUrl,
  });
}

class _Card extends StatelessWidget {
  final String title;
  final String description;
  final IconData icon;
  final String? imageUrl;

  const _Card({
    super.key,
    required this.title,
    required this.description,
    this.icon = Icons.hail,
    this.imageUrl,
  });

  factory _Card.fromData(_CardData data) => _Card(
    title: data.title,
    description: data.description,
    icon: data.icon,
    imageUrl: data.imageUrl,
  );

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.fromLTRB(20, 8, 20, 8),
      padding: const EdgeInsets.fromLTRB(20, 15, 20, 15),
      decoration: BoxDecoration(
        color: Colors.deepPurple.shade200,
        borderRadius: BorderRadius.circular(15),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 4,
            offset: const Offset(0, 5),
            blurRadius: 6,
          )
        ],
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          ClipRRect(
            borderRadius: BorderRadius.circular(20),
            child: SizedBox(
              height: 140,
              width: 100,
              child: Image.network(
                imageUrl ?? '',
                fit: BoxFit.cover,
                errorBuilder: (_, __, ___) => const Placeholder(),
              ),
            ),
          ),
          Flexible(
            child: Padding(
              padding: const EdgeInsets.only(left: 15.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    title,
                    style: Theme.of(context).textTheme.headlineLarge,
                  ),
                  Text(
                    description,
                    style: Theme.of(context).textTheme.bodyLarge),
                ],
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(left: 16.0),
            child: Icon(icon),
          ),
        ],
      ),
    );
  }
}