feat: Add trip details screen and update navigation in home content

lib/components/home/home_content.dart

@@ -4,6 +4,7 @@ import 'package:travel_mate/components/home/create_trip_content.dart';
 import '../../providers/user_provider.dart';
 import '../../services/trip_service.dart';
 import '../../models/trip.dart';
+import '../home/show_trip_details_content.dart';
 
 class HomeContent extends StatefulWidget {
   const HomeContent({super.key});
@@ -187,7 +188,10 @@ class _HomeContentState extends State<HomeContent> {
       shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
       child: InkWell(
         onTap: () {
-          _showTravelDetails(context, trip);
+          Navigator.push(
+            context,
+            MaterialPageRoute(builder: (context) => ShowTripDetailsContent(trip: trip)),
+          );
         },
         borderRadius: BorderRadius.circular(12),
         child: Column(
@@ -309,7 +313,7 @@ class _HomeContentState extends State<HomeContent> {
                       Icon(Icons.group, size: 16, color: Colors.grey[600]),
                       SizedBox(width: 8),
                       Text(
-                        '${trip.participants.length} participant${trip.participants.length > 0 ? 's' : ''}',
+                        '${trip.participants.length} participant${trip.participants.length > 1 ? 's' : ''}',
                         style: TextStyle(
                           fontSize: 14,
                           color: Colors.grey[600],
@@ -391,34 +395,4 @@ class _HomeContentState extends State<HomeContent> {
       return 'À venir';
     }
   }
-
-  void _showTravelDetails(BuildContext context, Trip trip) {
-    Navigator.push(
-      context,
-      MaterialPageRoute(
-        builder: (context) => Scaffold(
-          appBar: AppBar(title: Text(trip.title)),
-          body: Padding(
-            padding: EdgeInsets.all(16),
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Text('Destination: ${trip.location}'),
-                SizedBox(height: 8),
-                Text('Description: ${trip.description}'),
-                SizedBox(height: 8),
-                Text('Dates: ${trip.startDate.day}/${trip.startDate.month}/${trip.startDate.year} - ${trip.endDate.day}/${trip.endDate.month}/${trip.endDate.year}'),
-                SizedBox(height: 8),
-                Text('Budget: ${trip.budget}€'),
-                SizedBox(height: 8),
-                Text('Participants: ${trip.participants.length}'),
-                SizedBox(height: 16),
-                Text('(Détails complets à implémenter)'),
-              ],
-            ),
-          ),
-        ),
-      ),
-    );
-  }
 }

lib/components/home/show_trip_details_content.dart

@@ -0,0 +1,80 @@
+import 'package:flutter/material.dart';
+import 'package:travel_mate/models/trip.dart';
+
+class ShowTripDetailsContent extends StatefulWidget {
+  final Trip trip;
+  const ShowTripDetailsContent({super.key, required this.trip});
+
+  @override
+  State<ShowTripDetailsContent> createState() => _ShowTripDetailsContentState();
+}
+
+class _ShowTripDetailsContentState extends State<ShowTripDetailsContent> {
+
+
+  
+
+  @override
+  Widget build(BuildContext context) {
+    // You can access the trip via widget.trip
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(widget.trip.title),
+      ),
+      body: Padding(
+        padding: const EdgeInsets.all(16.0),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(
+              widget.trip.title,
+              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
+            ),
+            SizedBox(height: 8),
+            Text(widget.trip.description),
+            SizedBox(height: 16),
+            Row(
+              children: [
+                Icon(Icons.location_on, size: 16, color: Colors.grey[600]),
+                SizedBox(width: 8),
+                Text(
+                  widget.trip.location,
+                  style: TextStyle(fontSize: 14, color: Colors.grey[600]),
+                ),
+              ],
+            ),
+            SizedBox(height: 8),
+            Row(
+              children: [
+                Icon(Icons.calendar_today, size: 16, color: Colors.grey[600]),
+                SizedBox(width: 8),
+                Text(
+                  '${widget.trip.startDate.toLocal()} - ${widget.trip.endDate.toLocal()}',
+                  style: TextStyle(fontSize: 14, color: Colors.grey[600]),
+                ),
+              ],
+            ),
+            SizedBox(height: 8),
+            Row(
+              children: [
+                Icon(Icons.group, size: 16, color: Colors.grey[600]),
+                SizedBox(width: 8),
+                Text(
+                  '${widget.trip.participants.length} participant${widget.trip.participants.length > 1 ? 's' : ''}',
+                  style: TextStyle(
+                    fontSize: 14,
+                    color: Colors.grey[600],
+                  ),
+                ),
+              ],
+            ),
+            SizedBox(height: 16),
+            Text('Budget: ${widget.trip.budget ?? 'N/A'}€'),
+            SizedBox(height: 16),
+            // Add more trip details as needed
+          ],
+        ),
+      )
+    );
+  }
+}