import { Loader2 } from "lucide-react"

export default function ToolsLoading() {
    return (
        <div className="container mx-auto px-4 py-8 max-w-7xl">
            <div className="mb-8">
                <div className="h-10 w-48 bg-muted rounded-lg animate-pulse mb-3" />
                <div className="h-5 w-80 bg-muted rounded-lg animate-pulse" />
            </div>

            {/* Categories skeleton */}
            <div className="flex gap-2 mb-8 flex-wrap">
                {Array.from({ length: 8 }).map((_, i) => (
                    <div key={i} className="h-9 w-24 bg-muted rounded-full animate-pulse" />
                ))}
            </div>

            {/* Grid skeleton */}
            <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                {Array.from({ length: 12 }).map((_, i) => (
                    <div key={i} className="rounded-xl border border-border p-5 space-y-3">
                        <div className="h-10 w-10 bg-muted rounded-lg animate-pulse" />
                        <div className="h-5 w-3/4 bg-muted rounded animate-pulse" />
                        <div className="h-4 w-full bg-muted rounded animate-pulse" />
                    </div>
                ))}
            </div>
        </div>
    )
}