import 'package:flutter/material.dart';
import '../components/my_drawer.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home'),
        // different appbar style for homepage
        backgroundColor: Colors.transparent,
      ),
      drawer: const MyDrawer(),
      body: Center(
        child: AspectRatio(
          aspectRatio: 1,
          child: LayoutBuilder(
            builder: (context, constraints) {
              // Calculation of the tile size based on the spacing
              double size = constraints.biggest.shortestSide / 2 - 16;
              return GridView.count(
                crossAxisCount: 2,
                crossAxisSpacing: 6.0,
                mainAxisSpacing: 6.0,
                padding: const EdgeInsets.all(16.0),
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(),
                children: [
                  _buildTile(
                    context,
                    'Discover',
                    Icons.explore,
                    Colors.lightBlue.shade300,
                    '/discover',
                    size,
                  ),
                  _buildTile(
                    context,
                    'View Profiles',
                    Icons.supervised_user_circle,
                    Colors.teal.shade300,
                    '/favorites',
                    size,
                  ),
                  _buildTile(
                    context,
                    'Chat',
                    Icons.chat,
                    Colors.indigo.shade300,
                    '/chats',
                    size,
                  ),
                  _buildTile(
                    context,
                    'My Profile',
                    Icons.edit_note,
                    Colors.blueGrey.shade300,
                    '/profile',
                    size,
                  ),
                ],
              );
            },
          ),
        ),
      ),
    );
  }

  Widget _buildTile(BuildContext context, String title, IconData icon,
      Color color, String route, double size) {
    return InkWell(
      onTap: () {
        Navigator.pushNamed(context, route);
      },
      child: Container(
        decoration: BoxDecoration(
          color: color,
          borderRadius: BorderRadius.circular(16.0),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              icon,
              size: 50,
              color: Theme.of(context).colorScheme.surface,
            ),
            const SizedBox(height: 10),
            Text(
              title,
              style: TextStyle(
                color: Theme.of(context).colorScheme.surface,
                fontSize: 20,
              ),
            ),
          ],
        ),
      ),
    );
  }
}