interface Stat {
    id: number;
    description: string;
    number: string;
}
 
const stats: Stat[] = [
    {
        id: 1,
        description: 'Community Members',
        number: '120+',
    },
    {
        id: 2,
        description: 'Categories',
        number: '16',
    },
    {
        id: 3,
        description: 'Design Blocks',
        number: '80+',
    },
    {
        id: 4,
        description: 'Page Templates',
        number: '11',
    },
];
 
export default function StatSection() {
    return (
        <section className="py-16">
            <div className="bg-secondary grid gap-0.5 sm:grid-cols-2 lg:grid-cols-4">
                {stats.map((stat: Stat) => (
                    <div key={stat.id} className="bg-background flex justify-center p-6 text-center lg:text-left">
                        <div>
                            <div className="text-4xl font-bold tracking-tight">{stat.number}</div>
                            <div className="text-muted-foreground mt-2 text-sm/6">{stat.description}</div>
                        </div>
                    </div>
                ))}
            </div>
        </section>
    );
}