import { Card } from "@/components/ui/card";
import { getGame } from "@/lib/igdb";
import { IGame } from "@/types/igdb-types";
import Image from "next/image";

// renders a single game detail page
export default async function GameDetail({ params }: { params: { gameid: string } }) {
    const data: IGame[] = await getGame(parseInt(params.gameid))

    // onvert unix timestamp to date in this format: Feb 25, 2022
    const date = new Date(data[0].first_release_date * 1000).toLocaleDateString('en-US', {
        month: 'short',
        day: 'numeric',
        year: 'numeric'
    })

    const companies = data[0].involved_companies.map((company) => {
        // put a comma between each company
        if (company !== data[0].involved_companies[0]) {
            return `, ${company.company.name}`
        }
        return company.company.name
    })

    return (
        <div className="main-content h-full">
            <Card className="w-full h-full overflow-hidden">
                <div className="h-64 overflow-hidden -top-1/2">
                    <div className="aspect-[889/500] relative block group">
                        <Image
                            src={data[0].screenshots[0].url}
                            alt={data[0].name}
                            fill
                            priority
                            className="object-center" />
                    </div>
                </div>
                <div className="p-6 md:p-12 ss:flex">
                    <div className="aspect-[264/374]">
                        <Card className="aspect-[264/374] relative block group -mt-36 w-52 flex-shrink-0">
                            <Image
                                src={data[0].cover.url}
                                alt={data[0].name}
                                fill
                                priority
                                className="object-cover rounded-lg" />
                        </Card>
                    </div>
                    <div className="ml-6 md:ml-12 grid items-start gap-2">
                        <h1>{data[0].name}</h1>
                        <h1>released on {date} by {companies}</h1>
                        <h1>{data[0].summary}</h1>
                    </div>
                </div>
                <div className="px-6 md:px-12">
                    <div className='mt-6 border-b border-gray-400 dark:border-gray-200 ' />
                    {/* comments */}
                </div>
            </Card>
            <div>
                <Card className="side-content">
                    a
                </Card>
            </div>

        </div>
    )
}