import { AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Card, CardContent } from "@/components/ui/card"
import { NonNullStats } from "@/lib/schema/player"
import { cn } from "@/lib/utils"
import CollapsedStats from "../../_components/CollapsedStats"
import ArenaBrawlStats from "./arenabrawl"
import PaintballStats from "./paintball"

export default function ClassicStats({ stats }: { stats: { arena: NonNullStats["ArenaBrawl"], paintball: NonNullStats["Paintball"] } }) {
    return (
        <AccordionItem value="classic">
            <Card className="py-0">
                <CardContent>
                    <AccordionTrigger className={cn("items-center py-2 hover:no-underline hover:cursor-pointer overflow-y-auto")}>
                        <h1 className="text-xl font-bold">Classic</h1>
                        <div className="flex gap-4">
                            <CollapsedStats
                                stats={[{
                                    title: <p>Modes</p>,
                                    stat: <p className="text-muted-foreground">Arena Brawl | Paintball | Quakecraft | TKR | VampireZ | Walls</p>
                                }]}
                            />
                        </div>
                    </AccordionTrigger>
                </CardContent>
            </Card>
            <AccordionContent className="pt-4 space-y-4 mx-auto w-[95%]">
                <ArenaBrawlStats stats={stats.arena} />
                <PaintballStats stats={stats.paintball} />
            </AccordionContent>
        </AccordionItem>
    )
}