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;

        // Logo mengikuti sisi terpendek placeholder
        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: _buildLogo(context, minDimension)),
        );
      },
    );
  }

  Widget _buildLogo(BuildContext context, double minDimension) {
    final size = (minDimension * 0.6).clamp(28.0, 140.0);
    // Aset logo 1024px; decode seukuran tampilan saja.
    final cacheSize = (size * 1.2 * MediaQuery.devicePixelRatioOf(context))
        .round();

    return Container(
      width: size,
      height: size,
      padding: EdgeInsets.all(size * 0.04),
      decoration: BoxDecoration(
        color: Colors.white,
        shape: BoxShape.circle,
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.08),
            blurRadius: size * 0.1,
            offset: Offset(0, size * 0.03),
          ),
        ],
      ),
      child: ClipOval(
        // Sudut aset logo berlatar gelap; diperbesar sedikit supaya yang
        // terlihat hanya lingkaran merahnya.
        child: Transform.scale(
          scale: 1.2,
          child: Assets.images.logo.image(
            fit: BoxFit.cover,
            cacheWidth: cacheSize,
          ),
        ),
      ),
    );
  }
}