import 'package:flutter/material.dart'; // Import Material package for UI components

class GalleryScreen extends StatelessWidget {
  // StatelessWidget since we don't need to manage state for this view
  const GalleryScreen({super.key}); // Constructor with optional key parameter

  @override
  Widget build(BuildContext context) {
    // Build method defines the gallery screen UI
    // List of image paths from assets folder
    final List<String> imagePaths = [
      'assets/images/1.jpg', // Path to first photo
      'assets/images/2.jpg', // Path to second photo
      'assets/images/3.jpg', // Path to third photo
      'assets/images/4.jpg', // Path to fourth photo
    ];

    return Scaffold(
      // Scaffold provides the basic material design structure
      appBar: AppBar(
        // App bar at the top of the screen
        title: const Text('Photo Gallery'), // Title text
        automaticallyImplyLeading: true,
        actions: [
          IconButton(
            icon: const Icon(
              Icons.logout,
              color: Color.fromARGB(255, 26, 100, 3),
            ), // Ensure visible color
            tooltip: 'Logout',
            onPressed: () {
              // Navigate back to login screen and remove all previous routes
              Navigator.of(
                context,
              ).pushNamedAndRemoveUntil('/', (route) => false);
            },
          ),
        ],
      ),
      body: GridView.builder(
        // GridView to display photos in a grid
        padding: const EdgeInsets.all(16), // Add padding around all sides
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          // Define grid layout
          crossAxisCount: 2, // 2 items per row
          crossAxisSpacing: 16, // Horizontal space between items
          mainAxisSpacing: 16, // Vertical space between items
        ),
        itemCount: imagePaths.length, // Number of items to display
        itemBuilder: (context, index) {
          // Builder for each grid item
          return ClipRRect(
            // Clip the image with rounded corners
            borderRadius: BorderRadius.circular(12), // 12 pixel rounded corners
            child: Image.asset(
              // Display asset image
              imagePaths[index], // Path from the list based on index
              fit: BoxFit.cover, // Scale image to cover the available space
            ),
          );
        },
      ),
    );
  }
}