import "./WalkingLoading.css";

export function WalkingLoading() {
  return (
    <div className="WalkingLoading">
      {Array.from({ length: 2 }).map((_, i) => (
        <div key={i} className="WalkingLoading-pill">
          <div className="WalkingLoading-content">
            {/* Title */}
            <div
              className="skeleton"
              style={{
                width: "60%",
                height: "1.125rem",
                marginBottom: "0.5rem",
                borderRadius: "6px",
              }}
            />
            {/* Subtitle */}
            <div
              className="skeleton"
              style={{
                width: "40%",
                height: "0.8125rem",
                marginBottom: "1rem",
                borderRadius: "4px",
              }}
            />
            {/* Progress dots */}
            <div className="WalkingLoading-progress">
              {Array.from({ length: 6 }).map((_, dotIdx) => (
                <div key={dotIdx} className="WalkingLoading-dotContainer">
                  <div
                    className="skeleton"
                    style={{
                      width: "12px",
                      height: "12px",
                      borderRadius: "50%",
                    }}
                  />
                  {dotIdx < 5 && (
                    <div
                      className="skeleton"
                      style={{
                        width: "20px",
                        height: "2px",
                        margin: "0 4px",
                        borderRadius: "1px",
                      }}
                    />
                  )}
                </div>
              ))}
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}