export function SkeletonCardLoader() {
  return (
    <div className="grid min-h-[220px] place-items-center bg-[#FAFAF8] p-12">
      <div className="w-full max-w-sm rounded-xl border border-[#1111111A] bg-[#FAFAF8] p-5">
        <div className="flex items-center gap-3">
          <span className="sk h-11 w-11 rounded-full" />
          <div className="flex-1 space-y-2">
            <span className="sk block h-3 w-1/2 rounded" />
            <span className="sk block h-2.5 w-1/3 rounded" />
          </div>
        </div>

        <span className="sk mt-5 block h-32 w-full rounded-lg" />

        <div className="mt-4 space-y-2">
          <span className="sk block h-2.5 w-full rounded" />
          <span className="sk block h-2.5 w-5/6 rounded" />
          <span className="sk block h-2.5 w-2/3 rounded" />
        </div>
      </div>

      <style>{`
        .sk {
          background: linear-gradient(
            100deg,
            #ECEAE4 30%,
            #F6F5F1 50%,
            #ECEAE4 70%
          );
          background-size: 200% 100%;
          animation: sk-shimmer 1.4s ease-in-out infinite;
        }
        @keyframes sk-shimmer {
          from { background-position: 200% 0; }
          to   { background-position: -200% 0; }
        }
        @media (prefers-reduced-motion: reduce) {
          .sk { animation: none; }
        }
      `}</style>
    </div>
  );
}
Skeleton Card Loader
