main

src/app/[locale]/(site)/games/[slug]/page.tsx

@@ -1,120 +1,12 @@
-import { notFound } from 'next/navigation';
-import { Container, Heading, Text, Box, Image, Badge, HStack, VStack, Icon, Flex } from '@chakra-ui/react';
-import { MOCK_GAMES } from '@/lib/api/mock-data';
-import { FaCalendar, FaGamepad } from 'react-icons/fa';
 
-interface PageProps {
-    params: Promise<{
-        slug: string;
-        locale: string;
-    }>;
-}
+import { GameDetail } from "@/components/features/games/GameDetail";
 
-export default async function GameDetailsPage({ params }: PageProps) {
+type Props = {
+    params: Promise<{ slug: string }>;
+};
+
+export default async function GamePage({ params }: Props) {
     const { slug } = await params;
-    const game = MOCK_GAMES.find((g) => g.slug === slug);
-
-    if (!game) {
-        notFound();
-    }
-
-    // Format date
-    const formattedDate = new Intl.DateTimeFormat('en-US', {
-        dateStyle: 'long',
-    }).format(game.releaseDate);
-
-    return (
-        <Container maxW="6xl" py={12} minH="100vh">
-            {/* Hero / Cover Section */}
-            <Box
-                position="relative"
-                h={{ base: "300px", md: "500px" }}
-                w="full"
-                overflow="hidden"
-                borderRadius="2xl"
-                mb={8}
-                boxShadow="2xl"
-            >
-                <Image
-                    src={game.coverImage}
-                    alt={game.title}
-                    objectFit="cover"
-                    w="full"
-                    h="full"
-                    filter="brightness(0.7)"
-                />
-                <Box
-                    position="absolute"
-                    bottom={0}
-                    left={0}
-                    w="full"
-                    p={8}
-                    bgGradient="linear(to-t, blackAlpha.900, transparent)"
-                >
-                    <VStack align="flex-start" gap={4}>
-                        <Heading size="3xl" color="white" textShadow="lg">{game.title}</Heading>
-                        <HStack gap={4}>
-                            <Badge colorScheme="purple" fontSize="0.9em" px={3} py={1} borderRadius="full">
-                                {new Date() < game.releaseDate ? 'Upcoming' : 'Released'}
-                            </Badge>
-                            {game.platforms.map(p => (
-                                <Badge key={p} variant="outline" colorScheme="cyan" px={2}>
-                                    {p}
-                                </Badge>
-                            ))}
-                        </HStack>
-                    </VStack>
-                </Box>
-            </Box>
-
-            {/* Details Grid */}
-            <Flex direction={{ base: 'column', lg: 'row' }} gap={12}>
-                {/* Main Content */}
-                <Box flex="1">
-                    <Heading size="lg" mb={4}>About</Heading>
-                    <Text fontSize="lg" lineHeight="tall" color="whiteAlpha.800">
-                        {/* Fallback description since mock doesn't have it yet */}
-                        {game.title} is an anticipated title releasing on {formattedDate}.
-                        Experience the next chapter in this gaming masterpiece.
-                        Prepare to embark on a journey like no other.
-                    </Text>
-                </Box>
-
-                {/* Sidebar Info */}
-                <Box w={{ base: 'full', lg: '350px' }}>
-                    <VStack
-                        align="stretch"
-                        p={6}
-                        bg="whiteAlpha.50"
-                        borderRadius="xl"
-                        border="1px solid"
-                        borderColor="whiteAlpha.200"
-                        gap={6}
-                    >
-                        <Heading size="md" mb={2}>Game Info</Heading>
-
-                        <Box>
-                            <HStack mb={1} color="gray.400">
-                                <Icon as={FaCalendar} />
-                                <Text fontSize="sm">Release Date</Text>
-                            </HStack>
-                            <Text fontSize="xl" fontWeight="bold">{formattedDate}</Text>
-                        </Box>
-
-                        <Box>
-                            <HStack mb={1} color="gray.400">
-                                <Icon as={FaGamepad} />
-                                <Text fontSize="sm">Platforms</Text>
-                            </HStack>
-                            <Flex gap={2} wrap="wrap">
-                                {game.platforms.map(p => (
-                                    <Badge key={p} colorScheme="green">{p}</Badge>
-                                ))}
-                            </Flex>
-                        </Box>
-                    </VStack>
-                </Box>
-            </Flex>
-        </Container>
-    );
+    console.log('Server Page received slug:', slug);
+    return <GameDetail slug={slug} />;
 }