"use client";

interface SkeletonProps {
  count?: number;
}

export default function CouponSkeleton({ count = 3 }: SkeletonProps) {
  return (
    <div className="coupons-block-list">
      {[...Array(count)].map((_, i) => (
        <div
          key={i}
          className="shadow-sm bg-white border rounded-3 p-3 mb-3"
        >
          <div className="row justify-content-center align-items-center position-relative">
            {/* Left side - Title and description skeleton */}
            <div className="col-xxl-9 col-xl-9 col-lg-9 col-md-9 col-sm-12 mt-xl-0 mt-4 text-md-left text-center">
              {/* Title skeleton */}
              <div
                className="rounded mb-3"
                style={{
                  height: "20px",
                  width: "80%",
                  background: "linear-gradient(90deg, #eee, #f7f7f7, #eee)",
                  backgroundSize: "200% 100%",
                  animation: "shimmer 1.5s infinite",
                }}
              />

              {/* Description skeleton */}
              <div
                className="rounded"
                style={{
                  height: "16px",
                  width: "60%",
                  background: "linear-gradient(90deg, #eee, #f7f7f7, #eee)",
                  backgroundSize: "200% 100%",
                  animation: "shimmer 1.5s infinite",
                }}
              />
            </div>

            {/* Right side - Button skeleton */}
            <div className="col-xxl-3 col-xl-4 col-lg-12 col-md-12 col-sm-12 col-12 text-center mt-xl-0 mt-4">
              <div
                className="rounded"
                style={{
                  height: "40px",
                  width: "100%",
                  background: "linear-gradient(90deg, #eee, #f7f7f7, #eee)",
                  backgroundSize: "200% 100%",
                  animation: "shimmer 1.5s infinite",
                }}
              />
            </div>
          </div>
        </div>
      ))}
      <style jsx>
        {`
          @keyframes shimmer {
            0% {
              background-position: -200% 0;
            }
            100% {
              background-position: 200% 0;
            }
          }
        `}
      </style>
    </div>
  );
}