import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:smart_hotel_app/views/home/inspection/cubit/inspection_state.dart';

class DeviceListItem extends StatelessWidget {
  final InspectionDevice device;
  final VoidCallback? onTap;

  const DeviceListItem({
    super.key,
    required this.device,
    this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(20.r),
        ),
        padding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 16.h),
        margin: EdgeInsets.only(bottom: 20.h),
        child: Row(
          children: [
            Container(
              width: 80.w,
              height: 64.h,
              decoration: BoxDecoration(
                color: const Color.fromRGBO(235, 244, 255, 1.0),
                borderRadius: BorderRadius.circular(8.r),
              ),
              child: Icon(
                device.icon,
                color: const Color.fromRGBO(66, 165, 245, 1.0),
                size: 42.sp,
              ),
            ),
            SizedBox(width: 16.w),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      Text(
                        device.name,
                        style: TextStyle(
                          fontSize: 28.sp,
                          fontWeight: FontWeight.bold,
                          color: const Color.fromRGBO(10, 13, 20, 1.0),
                        ),
                      ),
                      SizedBox(width: 18.w),
                      Text(
                        device.status,
                        style: TextStyle(
                          fontSize: 24.sp,
                          fontWeight: FontWeight.bold,
                          color: device.statusColor,
                        ),
                      ),
                    ],
                  ),
                  SizedBox(height: 4.h),
                  Text(
                    '${device.type} | ${device.location}',
                    style: TextStyle(
                      fontSize: 24.sp,
                      color: const Color.fromRGBO(100, 116, 139, 1.0),
                    ),
                  ),
                  SizedBox(height: 4.h),
                  Row(
                    children: [
                      Icon(
                        Icons.access_time,
                        color: const Color.fromRGBO(100, 116, 139, 1.0),
                        size: 28.sp,
                      ),
                      SizedBox(width: 4.w),
                      Text(
                        device.time.isNotEmpty ? device.time : '--',
                        style: TextStyle(
                          fontSize: 24.sp,
                          color: const Color.fromRGBO(100, 116, 139, 1.0),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            Icon(
              Icons.chevron_right,
              color: const Color.fromRGBO(100, 116, 139, 1.0),
              size: 56.sp,
            ),
          ],
        ),
      ),
    );
  }
}
