import 'package:flutter/material.dart';

/// Cadre navigateur — pendant de [PhoneMockup] pour l'aperçu de l'onglet Web.
/// [width]/[height] sont imposés par l'appelant (espace réellement disponible
/// dans le panneau d'aperçu), [width] permettant en plus de simuler une largeur
/// de viewport donnée (desktop vs mobile web) — visitapp-web est un site
/// responsive, pas une app figée à une taille.
class BrowserFrame extends StatelessWidget {
  final Widget child;
  final double width;
  final double height;

  const BrowserFrame({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(12),
        border: Border.all(color: Colors.black, width: 6),
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(8),
        child: Column(
          children: [
            Container(
              height: 28,
              color: const Color(0xFFE8EAED),
              padding: const EdgeInsets.symmetric(horizontal: 10),
              child: Row(
                children: const [
                  _Dot(color: Color(0xFFFF5F57)),
                  SizedBox(width: 6),
                  _Dot(color: Color(0xFFFEBC2E)),
                  SizedBox(width: 6),
                  _Dot(color: Color(0xFF28C840)),
                ],
              ),
            ),
            Expanded(child: Container(color: Colors.white, child: child)),
          ],
        ),
      ),
    );
  }
}

class _Dot extends StatelessWidget {
  final Color color;
  const _Dot({required this.color});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 10,
      height: 10,
      decoration: BoxDecoration(color: color, shape: BoxShape.circle),
    );
  }
}