// lib/widgets/responsive_layout.dart
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

/// Simple responsive layout chooser.
///
/// Behavior:
/// - On desktop platforms (Windows / macOS / Linux) -> always use `desktop`.
/// - On web -> treat as desktop (tablet/desktop UI). If you want web to act
///   like mobile at very narrow widths, you can change that logic here.
/// - On mobile platforms (Android / iOS) -> use `mobile` when width < mobileBreakpoint,
///   otherwise use `desktop`.
///
/// Tablet uses the desktop UI by design (per your request).
class ResponsiveLayout extends StatelessWidget {
  final Widget mobile;
  final Widget desktop;
  final double mobileBreakpoint;

  const ResponsiveLayout({
    Key? key,
    required this.mobile,
    required this.desktop,
    this.mobileBreakpoint = 700, // tune this value if you prefer different breakpoint
  })  : assert(mobileBreakpoint > 0),
        super(key: key);

  bool _isMobilePlatform() {
    // kIsWeb is true for web builds.
    if (kIsWeb) return false; // treat web as desktop/tablet by default
    // defaultTargetPlatform works on Flutter (all non-web platforms).
    return defaultTargetPlatform == TargetPlatform.android || defaultTargetPlatform == TargetPlatform.iOS;
  }

  bool _chooseMobile(BuildContext context) {
    final width = MediaQuery.of(context).size.width;

    // If running on Android/iOS, allow width to determine mobile vs desktop.
    if (_isMobilePlatform()) {
      return width < mobileBreakpoint;
    }

    // On desktop platforms (Windows/macOS/Linux) and on web, always use desktop UI.
    return false;
  }

  @override
  Widget build(BuildContext context) {
    return _chooseMobile(context) ? mobile : desktop;
  }
}