const shimmerStyle: React.CSSProperties = {
  background: "linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%)",
  backgroundSize: "600px 100%",
  animation: "shimmer 1.5s infinite linear",
};

type SkeletonType = "cards" | "banner" | "full";

const SkeletonLoader = ({ type = "cards", bannerHeight = '400px', cardHeight = '320px' }: { type?: SkeletonType, bannerHeight?: string, cardHeight?: string }) => {
  return (
    <>
      {/* Inject keyframes once */}
      <style>{`
        @keyframes shimmer {
          0% { background-position: -600px 0; }
          100% { background-position:  600px 0; }
        }
      `}</style>

      {type === "banner" && (
        <div style={{ ...shimmerStyle, width: "100%", height: bannerHeight }} />
      )}

      {type === "full" && (
        <div className="py-12 bg-white">
          <div className="container px-3">
            <div style={{ ...shimmerStyle, width: "100%", height: "400px", borderRadius: "8px" }} />
          </div>
        </div>
      )}

      {type === "cards" && (
        <div className="py-12 bg-white">
          <div className="container px-3">
            <div style={{ ...shimmerStyle, height: "32px", width: "192px", borderRadius: "6px", marginBottom: "24px" }} />
            <div className="-mx-1 flex flex-wrap sm:-mx-2 2xl:-mx-3">
              {[1, 2, 3, 4].map((i) => (
                <div className="xxl:w-1/4 xl:w-1/4 lg:w-1/4 md:w-1/3 sm:w-1/2 w-1/2 mb-4 px-1 sm:mb-5 sm:px-2 lg:mb-8 2xl:px-3">
                  <div
                    key={i}
                    style={{ ...shimmerStyle, width: "100%", height: cardHeight, borderRadius: "8px" }}
                  />
                </div>
              ))}
            </div>
          </div>
        </div>
      )}
    </>
  );
};

export default SkeletonLoader;
