import { Card, CardContent } from "@/components/ui/card"
import { Loader2 } from "lucide-react"

export default function SettingsLoading() {
    return (
        <div className="container mx-auto px-4 py-8 max-w-3xl">
            {/* Header Skeleton */}
            <div className="flex items-center gap-4 mb-8">
                <div className="h-10 w-10 bg-muted animate-pulse rounded-lg" />
                <div>
                    <div className="h-6 w-24 bg-muted animate-pulse rounded" />
                    <div className="h-4 w-48 bg-muted animate-pulse rounded mt-1" />
                </div>
            </div>

            {/* Cards Skeleton */}
            <div className="space-y-6">
                {[1, 2, 3].map(i => (
                    <Card key={i}>
                        <CardContent className="p-6">
                            <div className="h-6 w-32 bg-muted animate-pulse rounded mb-4" />
                            <div className="space-y-3">
                                <div className="h-10 w-full bg-muted animate-pulse rounded" />
                                <div className="h-10 w-full bg-muted animate-pulse rounded" />
                            </div>
                        </CardContent>
                    </Card>
                ))}
            </div>

            {/* Loading Indicator */}
            <div className="flex items-center justify-center py-8">
                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
            </div>
        </div>
    )
}