interface ProjectStatsProps {
    stats: {
        total: number;
        inProgress: number;
        completed: number;
    };
}

export function ProjectStats({ stats }: ProjectStatsProps) {
    return (
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
            <div className="rounded-xl border bg-white/50 p-4 backdrop-blur-sm dark:bg-neutral-900/50">
                <div className="text-sm font-medium text-muted-foreground">
                    Total Projects
                </div>
                <div className="mt-1 text-2xl font-bold">{stats.total}</div>
            </div>
            <div className="rounded-xl border bg-white/50 p-4 backdrop-blur-sm dark:bg-neutral-900/50">
                <div className="text-sm font-medium text-muted-foreground">
                    In Progress
                </div>
                <div className="mt-1 text-2xl font-bold">
                    {stats.inProgress}
                </div>
            </div>
            <div className="rounded-xl border bg-white/50 p-4 backdrop-blur-sm dark:bg-neutral-900/50">
                <div className="text-sm font-medium text-muted-foreground">
                    Completed
                </div>
                <div className="mt-1 text-2xl font-bold">{stats.completed}</div>
            </div>
        </div>
    );
}