'use client'

import { PlusIcon, FireIcon, BookOpenIcon } from '@heroicons/react/24/outline'

export default function QuickActionsSkeleton() {
  return (
    <div>
      <h2 className="text-lg sm:text-xl font-black text-white mb-4">Quick Actions</h2>
      <div className="space-y-3">
        {/* New Book Action */}
        <div className="bg-gradient-to-br from-blue-500/10 to-purple-500/10 border border-white/10 rounded-2xl p-4">
          <div className="flex items-center space-x-3 sm:space-x-4">
            <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center flex-shrink-0">
              <PlusIcon className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
            </div>
            <div className="min-w-0">
              <h3 className="text-white font-bold mb-1 text-sm sm:text-base">New Book</h3>
              <p className="text-gray-400 text-xs sm:text-sm">Start writing</p>
            </div>
          </div>
        </div>

        {/* Upgrade Action */}
        <div className="bg-gradient-to-br from-amber-500/10 to-orange-500/10 border border-white/10 rounded-2xl p-4">
          <div className="flex items-center space-x-3 sm:space-x-4">
            <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center flex-shrink-0">
              <FireIcon className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
            </div>
            <div className="min-w-0">
              <h3 className="text-white font-bold mb-1 text-sm sm:text-base">Upgrade</h3>
              <p className="text-gray-400 text-xs sm:text-sm">Unlock AI power</p>
            </div>
          </div>
        </div>

        {/* Learn Action */}
        <div className="bg-gradient-to-br from-emerald-500/10 to-teal-500/10 border border-white/10 rounded-2xl p-4">
          <div className="flex items-center space-x-3 sm:space-x-4">
            <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-emerald-500 to-teal-600 flex items-center justify-center flex-shrink-0">
              <BookOpenIcon className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
            </div>
            <div className="min-w-0">
              <h3 className="text-white font-bold mb-1 text-sm sm:text-base">Learn</h3>
              <p className="text-gray-400 text-xs sm:text-sm">Master Bookwiz</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}