import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';

class SlidingPuzzlePiece extends StatelessWidget {
  final CachedNetworkImage image;
  final Size imageSize;
  final int originalRow;
  final int originalCol;
  final int maxRows;
  final int maxCols;
  final VoidCallback onTap;
  final double width;
  final double height;
  final bool showNumberHint;

  const SlidingPuzzlePiece({
    Key? key,
    required this.image,
    required this.imageSize,
    required this.originalRow,
    required this.originalCol,
    required this.maxRows,
    required this.maxCols,
    required this.onTap,
    required this.width,
    required this.height,
    this.showNumberHint = false,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        width: width,
        height: height,
        margin: const EdgeInsets.all(2), // Subtle gap
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.2),
              blurRadius: 4,
              offset: const Offset(0, 2),
            ),
          ],
        ),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(8),
          child: Stack(
            children: [
              OverflowBox(
                maxWidth: imageSize.width,
                maxHeight: imageSize.height,
                alignment: Alignment(
                  maxCols == 1 ? 0.0 : -1.0 + (originalCol * 2 / (maxCols - 1)),
                  maxRows == 1 ? 0.0 : -1.0 + (originalRow * 2 / (maxRows - 1)),
                ),
                child: image,
              ),
              if (showNumberHint)
                Container(
                  color: Colors.black.withOpacity(0.3),
                  child: Center(
                    child: Text(
                      '${originalRow * maxCols + originalCol + 1}',
                      style: const TextStyle(
                        color: Colors.white,
                        fontSize: 24,
                        fontWeight: FontWeight.bold,
                        shadows: [
                          Shadow(
                            blurRadius: 4.0,
                            color: Colors.black,
                            offset: Offset(0, 0),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
            ],
          ),
        ),
      ),
    );
  }
}