import { AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Card, CardContent } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { NonNullStats } from "@/lib/schema/player"
import CollapsedStats from "../../_components/CollapsedStats"
import TNTGamesGeneralStats from "./stats"
import TNTWizardsStats from "./wizards"

export default function TNTGamesStats({ stats }: { stats: NonNullStats["TNTGames"] }) {
    if (!stats) return null

    return (
        <AccordionItem value="tnt-games">
            <Card className="py-0">
                <CardContent>
                    <AccordionTrigger className="items-center py-2 hover:no-underline hover:cursor-pointer">
                        <h1 className="text-xl font-bold">TNT Games</h1>
                        <div className="flex gap-4">
                            <CollapsedStats
                                stats={[{
                                    title: <p>Wins</p>,
                                    stat: <p className="text-muted-foreground">{stats.wins}</p>
                                }]}
                            />
                        </div>
                    </AccordionTrigger>
                    <AccordionContent>
                        <Separator className="my-4" />
                        <TNTGamesGeneralStats stats={stats} />
                        <Separator className="my-4" />
                        <TNTWizardsStats stats={stats} />
                    </AccordionContent>
                </CardContent>
            </Card>
        </AccordionItem>
    )
}