'use client'

import { BookOpenIcon, PencilSquareIcon, SparklesIcon, BoltIcon } from '@heroicons/react/24/outline'

export default function UsageStatsSkeleton() {
  return (
    <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
      {/* Books Skeleton */}
      <div className="relative bg-gradient-to-br from-blue-500/10 to-purple-500/10 rounded-2xl p-4 sm:p-6 border border-white/10 backdrop-blur-sm animate-pulse">
        <div className="absolute top-3 sm:top-4 right-3 sm:right-4">
          <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center shadow-lg">
            <BookOpenIcon className="w-4 h-4 sm:w-5 sm:h-5 text-white" />
          </div>
        </div>
        <div className="pt-1 sm:pt-2">
          <div className="w-12 h-6 sm:h-8 bg-white/20 rounded animate-pulse mb-1" style={{ animationDelay: '0ms' }}></div>
          <div className="text-xs sm:text-sm font-bold text-gray-400 uppercase tracking-wider">Books</div>
        </div>
      </div>

      {/* Words Skeleton */}
      <div className="relative bg-gradient-to-br from-emerald-500/10 to-teal-500/10 rounded-2xl p-4 sm:p-6 border border-white/10 backdrop-blur-sm animate-pulse">
        <div className="absolute top-3 sm:top-4 right-3 sm:right-4">
          <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-emerald-500 to-teal-600 flex items-center justify-center shadow-lg">
            <PencilSquareIcon className="w-4 h-4 sm:w-5 sm:h-5 text-white" />
          </div>
        </div>
        <div className="pt-1 sm:pt-2">
          <div className="w-16 h-6 sm:h-8 bg-white/20 rounded animate-pulse mb-1" style={{ animationDelay: '150ms' }}></div>
          <div className="text-xs sm:text-sm font-bold text-gray-400 uppercase tracking-wider">Words</div>
        </div>
      </div>

      {/* Advanced AI Skeleton */}
      <div className="relative bg-gradient-to-br from-amber-500/10 to-orange-500/10 rounded-2xl p-4 sm:p-6 border border-white/10 backdrop-blur-sm animate-pulse">
        <div className="absolute top-3 sm:top-4 right-3 sm:right-4">
          <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center shadow-lg">
            <SparklesIcon className="w-4 h-4 sm:w-5 sm:h-5 text-white" />
          </div>
        </div>
        <div className="pt-1 sm:pt-2">
          <div className="flex items-baseline space-x-1 mb-1">
            <div className="w-6 h-5 sm:h-8 bg-white/20 rounded animate-pulse" style={{ animationDelay: '300ms' }}></div>
            <div className="w-8 h-3 sm:h-4 bg-white/20 rounded animate-pulse" style={{ animationDelay: '450ms' }}></div>
          </div>
          <div className="text-xs sm:text-sm font-bold text-gray-400 uppercase tracking-wider mb-2">Advanced AI</div>
          <div className="w-full bg-black/30 rounded-full h-1">
            <div className="bg-white/20 h-1 rounded-full w-12 animate-pulse" style={{ animationDelay: '600ms' }}></div>
          </div>
        </div>
      </div>

      {/* Auto AI Skeleton */}
      <div className="relative bg-gradient-to-br from-violet-500/10 to-purple-500/10 rounded-2xl p-4 sm:p-6 border border-white/10 backdrop-blur-sm animate-pulse">
        <div className="absolute top-3 sm:top-4 right-3 sm:right-4">
          <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-br from-violet-500 to-purple-600 flex items-center justify-center shadow-lg">
            <BoltIcon className="w-4 h-4 sm:w-5 sm:h-5 text-white" />
          </div>
        </div>
        <div className="pt-1 sm:pt-2">
          <div className="flex items-baseline space-x-1 mb-1">
            <div className="w-6 h-5 sm:h-8 bg-white/20 rounded animate-pulse" style={{ animationDelay: '750ms' }}></div>
            <div className="w-8 h-3 sm:h-4 bg-white/20 rounded animate-pulse" style={{ animationDelay: '900ms' }}></div>
          </div>
          <div className="text-xs sm:text-sm font-bold text-gray-400 uppercase tracking-wider mb-2">Auto AI</div>
          <div className="w-full bg-black/30 rounded-full h-1">
            <div className="bg-white/20 h-1 rounded-full w-16 animate-pulse" style={{ animationDelay: '1050ms' }}></div>
          </div>
        </div>
      </div>
    </div>
  )
}