content: import 'package:flutter/material.dart';
  import 'package:nearby_service/nearby_service.dart';
  import 'package:nearby_service_example_full/domain/app_service.dart';
  import 'package:nearby_service_example_full/presentation/app.dart';
  import 'package:provider/provider.dart';
  
  class DevicePreview extends StatelessWidget {
    const DevicePreview({
      super.key,
      required this.device,
      this.largeView = false,
    });
  
    final NearbyDevice device;
    final bool largeView;
  
    @override
    Widget build(BuildContext context) {
      final color = device.status.isConnected ? kGreenColor : kGreyColor;
  
      final avatar = CircleAvatar(
        backgroundColor: kBlueColor.withValues(alpha: 0.7),
        foregroundColor: kWhiteColor,
        maxRadius: largeView ? 100 : 30,
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(
            device.info.displayName.substring(0, 1).toUpperCase(),
            style: TextStyle(fontSize: largeView ? 32 : 16),
          ),
        ),
      );
      final name = Text(
        '${device.info.displayName} '
        '${device.byPlatform(onAndroid: (d) => d.isGroupOwner ? " - group owner" : "") ?? ''}',
        style: Theme.of(context).textTheme.bodyMedium?.copyWith(
              fontWeight: FontWeight.bold,
            ),
      );
      final id = Text(
        'ID: ${device.info.id}',
        style: Theme.of(context).textTheme.labelSmall?.copyWith(
              fontSize: 10,
            ),
      );
      final status = Text(
        device.byPlatform(
              onAny: (d) => d.status.name,
              onDarwin: (d) =>
                  context.select<AppService, bool>((v) => v.isDarwinBrowser)
                      ? "Peer found | ${d.status.name}"
                      : "Pending invitation | ${d.status.name}",
            ) ??
            '',
        style: Theme.of(context).textTheme.labelSmall?.copyWith(
              color: color,
            ),
      );
  
      final trailingButton = device.status.isConnected
          ? TextButton(
              onPressed: () => context.read<AppService>().disconnect(device),
              style: TextButton.styleFrom(
                foregroundColor: kPinkColor,
              ),
              child: const Text('Disconnect'),
            )
          : null;
      if (largeView) {
        return Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            avatar,
            const SizedBox(height: 10),
            name,
            const SizedBox(height: 5),
            id,
            if (trailingButton != null)
              Padding(
                padding: const EdgeInsets.only(top: 10),
                child: trailingButton,
              ),
          ],
        );
      } else {
        return InkWell(
          borderRadius: BorderRadius.circular(12),
          onTap: () {
            if (device.status.isConnecting) {
              context.read<AppService>().cancelConnect();
            } else if (!device.status.isConnected) {
              context.read<AppService>().connect(device);
            } else {
              context.read<AppService>().startListeningConnectedDevice(device);
            }
          },
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Flexible(
                  flex: 3,
                  child: Row(
                    children: [
                      avatar,
                      const SizedBox(width: 10),
                      Flexible(
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [name, id, status],
                        ),
                      ),
                    ],
                  ),
                ),
                Flexible(
                  child: Text(
                    device.status.isConnected
                        ? 'Tap to chat'
                        : device.status.isConnecting
                            ? 'Tap to cancel connection'
                            : 'Tap to connect',
                    style: const TextStyle(color: kGreenColor, fontSize: 12),
                    textAlign: TextAlign.center,
                  ),
                )
              ],
            ),
          ),
        );
      }
    }
  }
  