import { Skeleton } from '@/components/ui/skeleton';

export function NotificationSkeleton() {
    return (
        <div className="divide-y divide-border">
            {Array.from({ length: 4 }).map((_, i) => (
                <div key={i} className="flex gap-3 px-4 py-3.5">
                    <Skeleton className="mt-0.5 h-8 w-8 shrink-0 rounded-lg" />
                    <div className="flex-1 space-y-2">
                        <div className="flex items-center justify-between gap-4">
                            <Skeleton className="h-3.5 w-2/3" />
                            <Skeleton className="h-3 w-10 shrink-0" />
                        </div>
                        <Skeleton className="h-3 w-full" />
                        <Skeleton className="h-3 w-4/5" />
                    </div>
                </div>
            ))}
        </div>
    );
}