import { motion } from "framer-motion";

// Loading Skeleton Component
function ServiceCardSkeleton() {
  return (
    <div className="animate-pulse space-y-4 py-6 px-8 rounded-xl bg-[#171616] bg-linear-to-br from-[#2a2a2a] to-black">
      <div className="h-6 bg-[#171616] rounded w-3/4"></div>
      <div className="h-4 bg-[#171616] rounded w-full"></div>
      <div className="h-4 bg-[#171616] rounded w-5/6"></div>
      <div className="h-8 bg-[#171616] rounded w-32"></div>
    </div>
  );
}

// Loading Component
export function ServicesLoading() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      className="max-w-250 w-full mx-auto space-y-5"
    >
      {/* Top Cards Skeleton */}
      <div className="flex sm:flex-row flex-col items-center gap-5">
        <div className="sm:w-[55%] w-full">
          <ServiceCardSkeleton />
        </div>
        <div className="sm:w-[45%] w-full">
          <ServiceCardSkeleton />
        </div>
      </div>

      {/* Bottom Cards Skeleton */}
      <div className="flex sm:flex-row flex-col items-start justify-between gap-5">
        <div className="sm:w-[40%] w-full">
          <ServiceCardSkeleton />
        </div>
        <div className="sm:w-[60%] w-full space-y-5">
          <ServiceCardSkeleton />
          <div className="h-24 bg-[#171616] rounded-xl animate-pulse"></div>
        </div>
      </div>
    </motion.div>
  );
}