enaklo-flutter/lib/presentation/components/image/image_placeholder.dart

part of 'image.dart';

class ImagePlaceholder extends StatelessWidget {
  const ImagePlaceholder({
    super.key,
    this.width,
    this.height,
    this.showBorderRadius = true,
    this.backgroundColor,
  });

  final double? width;
  final double? height;
  final bool showBorderRadius;
  final Color? backgroundColor;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        // Determine the size based on available space or provided dimensions
        final containerWidth = width ?? constraints.maxWidth;
        final containerHeight = height ?? constraints.maxHeight;

        // Calculate the minimum dimension to determine if we should show simple or detailed version
        final minDimension = math.min(
          containerWidth == double.infinity ? containerHeight : containerWidth,
          containerHeight == double.infinity ? containerWidth : containerHeight,
        );

        return Container(
          width: containerWidth == double.infinity
              ? double.infinity
              : containerWidth,
          height: containerHeight == double.infinity ? null : containerHeight,
          decoration: BoxDecoration(
            color: backgroundColor ?? const Color(0x4DD9D9D9),
            borderRadius: showBorderRadius
                ? const BorderRadius.only(
                    bottomLeft: Radius.circular(20),
                    bottomRight: Radius.circular(20),
                  )
                : null,
          ),
          child: Center(
            child: minDimension < 150
                ? _buildSimpleVersion(minDimension)
                : _buildDetailedVersion(minDimension),
          ),
        );
      },
    );
  }

  // Simple version for small sizes (< 100px)
  Widget _buildSimpleVersion(double size) {
    final iconSize = (size * 0.4).clamp(16.0, 32.0);
    final fontSize = (size * 0.12).clamp(8.0, 12.0);

    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          width: iconSize * 1.5,
          height: iconSize * 1.5,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(iconSize * 0.75),
          ),
          child: Center(
            child: Assets.images.logo.image(
              width: iconSize,
              height: iconSize,
              fit: BoxFit.contain,
            ),
          ),
        ),
        if (size > 50) ...[
          SizedBox(height: size * 0.05),
          Text(
            'Enaklo',
            style: TextStyle(
              color: AppColor.primary,
              fontSize: fontSize,
              fontWeight: FontWeight.bold,
            ),
          ),
        ],
      ],
    );
  }

  // Detailed version for larger sizes (>= 100px)
  Widget _buildDetailedVersion(double minDimension) {
    final scaleFactor = minDimension / 200; // Base scale factor

    // Proportional sizes
    final illustrationSize = (120 * scaleFactor).clamp(80.0, 120.0);
    final illustrationHeight = (160 * scaleFactor).clamp(100.0, 160.0);
    final handWidth = (60 * scaleFactor).clamp(30.0, 60.0);
    final handHeight = (80 * scaleFactor).clamp(40.0, 80.0);
    final cupWidth = (70 * scaleFactor).clamp(35.0, 70.0);
    final cupHeight = (90 * scaleFactor).clamp(45.0, 90.0);
    final logoSize = (40 * scaleFactor).clamp(20.0, 40.0);
    final fontSize = (12 * scaleFactor).clamp(8.0, 12.0);

    return Container(
      width: illustrationSize,
      height: illustrationHeight,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(illustrationSize / 2),
      ),
      child: Stack(
        children: [
          // Hand
          Positioned(
            bottom: illustrationHeight * 0.125, // 20/160 ratio
            left: illustrationSize * 0.25, // 30/120 ratio
            child: Container(
              width: handWidth,
              height: handHeight,
              decoration: BoxDecoration(
                color: const Color(0xFFFFDBB3),
                borderRadius: BorderRadius.circular(handWidth / 2),
              ),
            ),
          ),
          // Coffee cup
          Positioned(
            top: illustrationHeight * 0.1875, // 30/160 ratio
            left: illustrationSize * 0.208, // 25/120 ratio
            child: Container(
              width: cupWidth,
              height: cupHeight,
              decoration: BoxDecoration(
                color: const Color(0xFFF4E4BC),
                borderRadius: BorderRadius.circular(
                  math.max(8.0, 10 * scaleFactor),
                ),
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  // Logo
                  Assets.images.logo.image(
                    width: logoSize,
                    height: logoSize,
                    fit: BoxFit.contain,
                  ),
                  SizedBox(height: math.max(4.0, 8 * scaleFactor)),
                  if (cupHeight > 50) // Only show text if cup is big enough
                    Text(
                      'Enaklo',
                      style: TextStyle(
                        color: AppColor.primary,
                        fontSize: fontSize,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}