"use client";
import React from "react";

export default function PopularStoresSkeleton() {
  // Show 6 skeleton cards (same as your grid layout)
  const count = 6;

  return (
    <section
      className="popularStoresSection decorationNone popuFAQ On Macys:lar-store pt-3 pb-4"
      id="popularStoresSection"
    >
      <div className="container webContent text-center">
        {/* Section Title */}
        <div className="row">
          <div className="col-12">
            <div
              className="rounded mx-auto mb-3"
              style={shimmer(28, "40%")}
            />
          </div>
        </div>

        {/* Skeleton Store Cards */}
        <div className="row mt-4">
          {[...Array(count)].map((_, idx) => (
            <div
              key={idx}
              className="col-xxl-2 col-xl-2 col-lg-2 col-md-4 col-12 mb-xxl-4 mb-xl-4 mb-lg-4 mb-md-4 mb-2"
            >
              <div className="card shadow bg-white rounded">
                {/* Image Skeleton */}
                <div className="d-flex justify-content-center align-items-center mb-0 border-0 coupon-image p-3">
                  <div
                    className="rounded"
                    style={shimmer(120, "120px")}
                  />
                </div>

                {/* Footer Skeleton */}
                <div className="card-footer bg-white pt-2 text-center">
                  <div
                    className="rounded mx-auto"
                    style={shimmer(18, "60%")}
                  />
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <style jsx>{`
        @keyframes shimmer {
          0% {
            background-position: -200% 0;
          }
          100% {
            background-position: 200% 0;
          }
        }
      `}</style>
    </section>
  );
}

function shimmer(height: number, width: string | number) {
  return {
    height: `${height}px`,
    width: typeof width === "number" ? `${width}px` : width,
    background: "linear-gradient(90deg, #eee, #f7f7f7, #eee)",
    backgroundSize: "200% 100%",
    animation: "shimmer 1.5s infinite",
  } as React.CSSProperties;
}