'use client'

export function LoadingSkeleton() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      {[1, 2, 3, 4].map(i => (
        <div key={i} className="bg-white rounded-xl border border-gray-200 p-6 animate-pulse">
          <div className="flex items-center gap-2 mb-3">
            <div className="h-5 w-24 bg-gray-200 rounded-full" />
            <div className="h-5 w-20 bg-gray-200 rounded-full" />
          </div>
          <div className="h-6 w-3/4 bg-gray-200 rounded mb-2" />
          <div className="h-4 w-full bg-gray-100 rounded mb-4" />
          <div className="h-4 w-1/2 bg-gray-100 rounded" />
          <div className="mt-4 pt-4 border-t border-gray-100">
            <div className="flex gap-2">
              <div className="h-8 flex-1 bg-gray-200 rounded-lg" />
              <div className="h-8 w-24 bg-gray-200 rounded-lg" />
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}