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: 64.w,
              height: 66.h,
              decoration: BoxDecoration(
                color: const Color.fromRGBO(235, 244, 255, 1.0),
                borderRadius: BorderRadius.circular(12.r),
                border: Border.all(
                  color: const Color.fromRGBO(66, 165, 245, 1.0),
                  width: 1.w,
                  style: BorderStyle.solid,
                ),
              ),
              child: Icon(
                device.icon,
                color: const Color.fromRGBO(66, 165, 245, 1.0),
                size: 32.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: 8.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: 20.sp,
                      ),
                      SizedBox(width: 4.w),
                      Text(
                        device.time,
                        style: TextStyle(
                          fontSize: 20.sp,
                          color: const Color.fromRGBO(100, 116, 139, 1.0),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            Container(
              width: 48.w,
              height: 48.h,
              decoration: BoxDecoration(
                color: const Color.fromRGBO(242, 243, 245, 1.0),
                borderRadius: BorderRadius.circular(8.r),
              ),
              child: Icon(
                Icons.chevron_right,
                color: const Color.fromRGBO(100, 116, 139, 1.0),
                size: 24.sp,
              ),
            ),
          ],
        ),
      ),
    );
  }
}
