"use client"

import React from 'react'

export function LoadingSkeleton() {
  return (
    <div className="space-y-1">
      {[...Array(8)].map((_, i) => (
        <div key={i} className="grid grid-cols-12 gap-4 p-4 rounded-xl bg-white/5 border border-white/10">
          <div className="col-span-3 flex items-center gap-3">
            <div className="w-12 h-12 rounded-lg bg-white/10 animate-pulse" />
            <div className="flex-1 space-y-2">
              <div className="h-3 bg-white/10 rounded animate-pulse" style={{ width: '70%' }} />
              <div className="h-2 bg-white/10 rounded animate-pulse" style={{ width: '50%' }} />
              <div className="h-2 bg-white/10 rounded animate-pulse" style={{ width: '40%' }} />
            </div>
          </div>
          <div className="col-span-1 flex items-center justify-center">
            <div className="text-center space-y-1">
              <div className="h-5 w-8 bg-white/10 rounded animate-pulse mx-auto" />
              <div className="h-3 w-12 bg-white/10 rounded animate-pulse mx-auto" />
            </div>
          </div>
          <div className="col-span-1 flex items-center justify-center">
            <div className="text-center space-y-1">
              <div className="h-5 w-6 bg-white/10 rounded animate-pulse mx-auto" />
              <div className="h-3 w-8 bg-white/10 rounded animate-pulse mx-auto" />
            </div>
          </div>
          <div className="col-span-1 flex items-center justify-center">
            <div className="text-center space-y-1">
              <div className="h-5 w-6 bg-white/10 rounded animate-pulse mx-auto" />
              <div className="h-3 w-10 bg-white/10 rounded animate-pulse mx-auto" />
            </div>
          </div>
          <div className="col-span-1 flex items-center justify-center">
            <div className="text-center space-y-1">
              <div className="h-5 w-4 bg-white/10 rounded animate-pulse mx-auto" />
              <div className="h-3 w-12 bg-white/10 rounded animate-pulse mx-auto" />
            </div>
          </div>
          <div className="col-span-5 space-y-1">
            <div className="h-2 bg-white/10 rounded animate-pulse" style={{ width: '90%' }} />
            <div className="h-2 bg-white/10 rounded animate-pulse" style={{ width: '75%' }} />
            <div className="h-2 bg-white/10 rounded animate-pulse" style={{ width: '65%' }} />
          </div>
        </div>
      ))}
    </div>
  )
}