"use client"

import { useWebsiteTheme } from "@/providers/website-theme-provider"

export function StatCardSkeleton() {
  const { websiteTheme } = useWebsiteTheme()

  if (websiteTheme === "spidey") {
    return (
      <div className="col-span-full flex flex-col items-center justify-center py-20">
        <p className="text-[#CC0000] dark:text-[#FF1111] text-5xl font-['Bangers',cursive] animate-pulse">
          THWIP!
        </p>
        <p className="text-[#444444] dark:text-[#AAAAAA] text-sm mt-2">
          Loading your data...
        </p>
        <div className="w-48 h-1 rounded-full overflow-hidden bg-[#E0E0E0] dark:bg-[#222222] mt-4">
          <div className="w-full h-full rounded-full bg-gradient-to-r from-[#CC0000] via-[#FFFFFF] to-[#0033CC] animate-[loading_1.5s_ease-in-out_infinite]" />
        </div>
      </div>
    )
  }

  return (
    <div className="col-span-full flex flex-col items-center justify-center py-20">
      <p className="text-[#8A9078] dark:text-[#AAAAAA] text-sm">
        Loading your data...
      </p>
      <div className="w-48 h-1 rounded-full overflow-hidden bg-[#D4D8CC] dark:bg-[#222222] mt-4">
        <div className="w-full h-full rounded-full bg-sidebar animate-[loading_1.5s_ease-in-out_infinite]" />
      </div>
    </div>
  )
}