import 'package:digiplug/bat_theme/bat_theme.dart';
import 'package:digiplug/features/home/presentation/widgets/device_card.dart';
import 'package:digiplug/providers/home_data_provider.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:provider/provider.dart';

class DevicesScreen extends StatelessWidget {
  const DevicesScreen({super.key});

  @override
  Widget build(BuildContext context) {
    var theme = BatThemeData.of(context);

    // Mengambil data dari HomeDataProvider
    final homeData = context.watch<HomeDataProvider>();
    final devices = homeData.devices;

    return Scaffold(
      backgroundColor: theme.colors.background,
      body: SingleChildScrollView(
        padding: EdgeInsets.symmetric(horizontal: 24.w),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(height: 32.h),
            // Judul Halaman
            Text('Semua Perangkat', style: theme.typography.headline4),
            SizedBox(height: 32.h),

            // Menampilkan Grid dari semua perangkat
            devices.isEmpty
                ? const Center(child: Text('Belum ada perangkat.'))
                : GridView.builder(
                    shrinkWrap: true,
                    physics: const NeverScrollableScrollPhysics(),
                    gridDelegate:
                        const SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2,
                      crossAxisSpacing: 16,
                      mainAxisSpacing: 16,
                      childAspectRatio: 1,
                    ),
                    itemCount: devices.length,
                    itemBuilder: (context, index) {
                      // Menggunakan kembali widget DeviceCard
                      return DeviceCard(
                        device: devices[index],
                      );
                    },
                  ),
          ],
        ),
      ),
    );
  }
}