Loading Shimmer Cards

"use client";

interface LoadingShimmerCardsProps {
  count?: number;
  columns?: number;
}

export default function LoadingShimmerCards({
  count = 6,
  columns = 3,
}: LoadingShimmerCardsProps) {
  return (
    <div className="py-12 px-6" style={{ background: "var(--color-background)" }}>
      <div
        className="mx-auto max-w-5xl grid gap-4"
        style={{ gridTemplateColumns: `repeat(${Math.min(columns, 4)}, minmax(0, 1fr))` }}
      >
        {Array.from({ length: count }).map((_, i) => (
          <div
            key={i}
            className="rounded-xl overflow-hidden"
            style={{ background: "var(--color-background-card)", border: "1px solid var(--color-border)" }}
          >
            <div className="relative h-40 overflow-hidden" style={{ background: "var(--color-background-alt)" }}>
              <div
                className="absolute inset-0"
                style={{
                  background: "linear-gradient(90deg, transparent 0%, var(--color-background) 50%, transparent 100%)",
                  animation: "shimmer 1.5s infinite",
                }}
              />
            </div>
            <div className="p-4 flex flex-col gap-2.5">
              <div className="relative h-4 w-3/4 rounded overflow-hidden" style={{ background: "var(--color-background-alt)" }}>
                <div className="absolute inset-0" style={{ background: "linear-gradient(90deg, transparent 0%, var(--color-background) 50%, transparent 100%)", animation: "shimmer 1.5s infinite" }} />
              </div>
              <div className="relative h-3 w-full rounded overflow-hidden" style={{ background: "var(--color-background-alt)" }}>
                <div className="absolute inset-0" style={{ background: "linear-gradient(90deg, transparent 0%, var(--color-background) 50%, transparent 100%)", animation: "shimmer 1.5s infinite", animationDelay: "0.2s" }} />
              </div>
              <div className="relative h-3 w-2/3 rounded overflow-hidden" style={{ background: "var(--color-background-alt)" }}>
                <div className="absolute inset-0" style={{ background: "linear-gradient(90deg, transparent 0%, var(--color-background) 50%, transparent 100%)", animation: "shimmer 1.5s infinite", animationDelay: "0.4s" }} />
              </div>
            </div>
            <style>{`@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }`}</style>
          </div>
        ))}
      </div>
    </div>
  );
}