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="max-w-[1180px] mx-auto px-4">
            <div style={{ ...shimmerStyle, width: "100%", height: "400px", borderRadius: "8px" }} />
          </div>
        </div>
      )}

      {type === "cards" && (
        <div className="py-12 bg-white">
          <div className="max-w-[1180px] mx-auto px-4">
            <div style={{ ...shimmerStyle, height: "32px", width: "192px", borderRadius: "6px", marginBottom: "24px" }} />
            <div style={{ display: "flex", gap: "16px" }}>
              {[1, 2, 3, 4].map((i) => (
                <div
                  key={i}
                  style={{ ...shimmerStyle, flexShrink: 0, width: "224px", height: cardHeight, borderRadius: "8px" }}
                />
              ))}
            </div>
          </div>
        </div>
      )}
    </>
  );
};

export default SkeletonLoader;