import { AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Card, CardContent } from "@/components/ui/card"
import { ReactNode } from "react"
import CollapsedStats from "../_components/CollapsedStats"

export default function GeneralStats(
    { id, title, children, collapsedStats }: {
        id: string
        title: string
        children: ReactNode
        collapsedStats: Parameters<typeof CollapsedStats>[0]["stats"]
    }
) {
    return (
        <AccordionItem value={id}>
            <Card className="py-0">
                <CardContent>
                    <AccordionTrigger className="items-center py-2 hover:no-underline hover:cursor-pointer">
                        <h1 className="text-xl font-bold">{title}</h1>
                        <div className="flex gap-4">
                            <CollapsedStats stats={collapsedStats} />
                        </div>
                    </AccordionTrigger>
                    <AccordionContent>
                        {children}
                    </AccordionContent>
                </CardContent>
            </Card>
        </AccordionItem>
    )
}