import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import '../pages/mine/mine.dart';
import 'cached_image.dart';

class WorkGridView extends StatelessWidget {
  final List<WorkItem> items;
  final Function(int)? onTap;
  final Function(int)? onLikeTap;
  final bool showUpvote;
  final ScrollController? controller;

  const WorkGridView({
    Key? key,
    required this.items,
    this.onTap,
    this.onLikeTap,
    this.showUpvote = true,
    this.controller,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MasonryGridView.count(
      shrinkWrap: true,
      physics: controller != null
          ? const AlwaysScrollableScrollPhysics()
          : const NeverScrollableScrollPhysics(),
      controller: controller,
      crossAxisCount: 2,
      mainAxisSpacing: 12,
      crossAxisSpacing: 12,
      padding: EdgeInsets.zero,
      itemCount: items.length,
      itemBuilder: (context, index) {
        final item = items[index];
        return GestureDetector(
          onTap: () => onTap?.call(index),
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              color: const Color(0xFF2C2C2C),
            ),
            child: Stack(
              children: [
                AspectRatio(
                  aspectRatio: 0.8,
                  child: CachedImage(
                    imageUrl: item.imageUrl,
                    width: double.infinity,
                    fit: BoxFit.cover,
                    borderRadius: BorderRadius.circular(10),
                  ),
                ),
                Positioned(
                  bottom: 0,
                  left: 0,
                  right: 0,
                  child: Container(
                    padding: const EdgeInsets.symmetric(
                      horizontal: 8,
                      vertical: 8,
                    ),
                    decoration: BoxDecoration(
                      borderRadius: const BorderRadius.only(
                        bottomLeft: Radius.circular(10),
                        bottomRight: Radius.circular(10),
                      ),
                      gradient: LinearGradient(
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                        colors: [
                          Colors.transparent,
                          Colors.black.withOpacity(0.7),
                        ],
                      ),
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Expanded(
                          child: Text(
                            item.title,
                            style: const TextStyle(
                              color: Colors.white,
                              fontSize: 14,
                            ),
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                          ),
                        ),
                        if (showUpvote) ...[
                          const SizedBox(width: 4),
                          GestureDetector(
                            onTap: () => onLikeTap?.call(index),
                            child: Row(
                              children: [
                                Image.asset(
                                  'images/upvote.png',
                                  width: 18,
                                  height: 18,
                                  fit: BoxFit.contain,
                                  color: item.isAddLike == "1"
                                      ? const Color(0xffEE7371)
                                      : const Color(0xffC1C1C1),
                                ),
                                const SizedBox(width: 4),
                                Text(
                                  item.count,
                                  style: TextStyle(
                                    color: item.isAddLike == "1"
                                        ? const Color(0xffEE7371)
                                        : Colors.white,
                                    fontSize: 12,
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}