import 'package:flutter/material.dart';

/// [width]/[height] sont imposés par l'appelant (espace réellement disponible
/// dans le panneau d'aperçu) plutôt que dérivés de tout l'écran, pour que le
/// cadre entier reste visible sans avoir à scroller pour le voir en entier.
class PhoneMockup extends StatelessWidget {
  final Widget child;
  final double width;
  final double height;

  const PhoneMockup({super.key, required this.child, required this.width, required this.height});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: width,
      height: height,
      decoration: BoxDecoration(
        color: Colors.black,
        borderRadius: BorderRadius.circular(40),
        border: Border.all(color: Colors.black, width: 8),
      ),
      child: Stack(
        children: [
          // Écran
          Positioned.fill(
            child: ClipRRect(
              borderRadius: BorderRadius.circular(32),
              child: Container(
                color: Colors.white,
                child: child,
              ),
            ),
          ),
          // Notch
          Positioned(
            top: 8,
            left:(width * 0.35) / 2,
            right: (width * 0.35) / 2,
            child: Container(
              height: 20,
              decoration: BoxDecoration(
                color: Colors.black,
                borderRadius: BorderRadius.circular(10),
              ),
            ),
          ),
        ],
      ),
    );
  }
}