import 'package:flutter/material.dart';
import 'dart:ui'; // Required for ImageFilter

class DeviceListItem extends StatelessWidget {
  final String deviceName;
  final String deviceId; // Added for potential future use or subtitle
  final bool isUnknownDevice;
  // final String? imageUrl; // Optional image URL - commented out for now

  const DeviceListItem({
    super.key,
    required this.deviceName,
    required this.deviceId,
    this.isUnknownDevice = false,
    // this.imageUrl,
  });

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final isDarkMode = theme.brightness == Brightness.dark;

    // Glassy effect colors - adjust transparency and base color as needed
    final glassColor = isDarkMode
        ? Colors.white.withOpacity(0.1)
        : Colors.black.withOpacity(0.05);
    final shadowColor = isDarkMode
        ? Colors.black.withOpacity(0.4)
        : Colors.grey.withOpacity(0.5);

    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
      child: Row(
        children: [
          // Left side: Rounded Square Container
          Container(
            width: 60, // Square size
            height: 60,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(12), // Rounded corners
              boxShadow: [
                BoxShadow(
                  color: shadowColor,
                  blurRadius: 10,
                  offset: const Offset(0, 4),
                ),
              ],
            ),
            child: ClipRRect(
              // Apply blur effect within rounded corners
              borderRadius: BorderRadius.circular(12),
              child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
                child: Container(
                  decoration: BoxDecoration(
                    color:
                        glassColor, // Semi-transparent color for glass effect
                    borderRadius: BorderRadius.circular(12),
                    border: Border.all(
                      color: Colors.white.withOpacity(0.2), // Subtle border
                      width: 0.5,
                    ),
                  ),
                  child: const Center(
                    // Placeholder '?' - replace with Image widget when imageUrl is available
                    child: Text(
                      '?',
                      style: TextStyle(
                        fontSize: 30,
                        fontWeight: FontWeight.bold,
                        color: Colors.white70, // Adjust color as needed
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
          const SizedBox(width: 16), // Spacing between image and text

          // Right side: Device Name and ID
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  isUnknownDevice ? 'Unknown Device' : deviceName,
                  style: TextStyle(
                    fontSize: 16,
                    fontWeight:
                        isUnknownDevice ? FontWeight.normal : FontWeight.w500,
                    fontStyle:
                        isUnknownDevice ? FontStyle.italic : FontStyle.normal,
                    color: isUnknownDevice
                        ? theme.hintColor
                        : theme.textTheme.bodyLarge?.color,
                  ),
                  overflow: TextOverflow
                      .ellipsis, // Prevent long names from overflowing
                ),
                const SizedBox(height: 4),
                Text(
                  deviceId, // Display device ID as subtitle
                  style: theme.textTheme.bodySmall
                      ?.copyWith(color: theme.hintColor),
                  overflow: TextOverflow.ellipsis,
                ),
              ],
            ),
          ),
          // Optional: Add an icon or button on the far right if needed later
          // Icon(Icons.chevron_right, color: theme.hintColor),
        ],
      ),
    );
  }
}