import 'package:flutter/material.dart';

import 'comment_model.dart';

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

  @override
  Widget build(BuildContext context) {
    final data = [
      CommentModel(
        title: 'Oh my god',
        text: 'this app is so cool ' * 10,
        imageUrl:
            'https://preview.free3d.com/img/2016/03/1875481443430303321/hld8c0oa.jpg',
      ),
      CommentModel(
        title: 'Listen to me',
        text: 'This app is like Half-Life 3 - it will never be released',
        imageUrl:
            'https://us-tuna-sounds-images.voicemod.net/356aeabd-18d5-40d8-af31-b479f4eff183-1704672174928.png',
      ),
      CommentModel(
        title: 'BREAKING!!!',
        text: 'The next lab work will have DLC in the form of likes',
        imageUrl: 'https://i.playground.ru/p/BWixorSTeZQfoPvdVL9lgA.jpeg',
      ),
      CommentModel(
        title: 'Test',
        text: 'Test',
      ),
      CommentModel(
        title: 'Test',
        text: 'Test',
      ),
    ];

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

class _Comment extends StatelessWidget {
  final String title;
  final String text;
  final String? imageUrl;

  const _Comment({
    required this.title,
    required this.text,
    this.imageUrl,
  });

  factory _Comment.fromData(CommentModel model) => _Comment(
        title: model.title,
        text: model.text,
        imageUrl: model.imageUrl,
      );

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(16),
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white70,
        borderRadius: BorderRadius.circular(16),
        border: Border.all(color: Colors.grey),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(.5),
            spreadRadius: 4,
            offset: const Offset(0, 5),
            blurRadius: 8,
          ),
        ],
      ),
      child: Row(
        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(),
              ),
            ),
          ),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.only(left: 16.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    title,
                    style: Theme.of(context).textTheme.headlineLarge,
                  ),
                  Text(
                    text,
                    style: Theme.of(context).textTheme.bodyLarge,
                  )
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}