import 'package:auto_size_text/auto_size_text.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';
import 'package:text_scroll/text_scroll.dart';

class ImageCover extends StatelessWidget {
  const ImageCover({
    required this.imageUrl,
    required this.title,
    this.heroTag = "VeryUnconspicous",
    this.cacheKey,
    super.key,
  });

  final String imageUrl;
  final String title;
  final double _width = 180;
  final String heroTag;
  final String? cacheKey;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(
          width: _width,
          height: _width,
          child: Hero(
            tag: heroTag,
            child: ClipRRect(
              borderRadius: BorderRadius.circular(8),
              child: CachedNetworkImage(
                cacheKey: cacheKey,
                imageUrl: imageUrl,
                placeholder: (c, d) => Shimmer.fromColors(
                  baseColor: Colors.grey.shade300,
                  highlightColor: Colors.grey.shade100,
                  child: Container(
                    color: Colors.grey,
                  ),
                ),
                errorWidget: (c, _, __) {
                  return ColoredBox(
                    color: Theme.of(context).colorScheme.primaryContainer,
                    child: Center(
                      child: Icon(
                        Icons.music_note,
                        color: Theme.of(context).colorScheme.onPrimaryContainer,
                      ),
                    ),
                  );
                },
              ),
            ),
          ),
        ),
        const SizedBox(
          height: 5,
        ),
        SizedBox(
          width: _width * 0.7,
          child: AutoSizeText(
            title,
            textAlign: TextAlign.center,
            style: const TextStyle(fontWeight: FontWeight.bold),
            overflowReplacement: TextScroll(
              title,
              style: const TextStyle(fontWeight: FontWeight.bold),
            ),
          ),
        ),
        const SizedBox(
          height: 10,
        ),
      ],
    );
  }
}