import "./TrailsLoading.css";

export function TrailsLoading() {
  return (
    <div className="TrailsLoading-grid">
      {Array.from({ length: 4 }).map((_, i) => (
        <div key={i} className="TrailsLoading-card">
          <div
            className="skeleton"
            style={{ width: "60%", height: "1.125rem", marginBottom: "0.75rem" }}
          />
          <div
            className="skeleton"
            style={{ width: "90%", height: "0.9375rem", marginBottom: "0.75rem" }}
          />
          <div className="TrailsLoading-meta">
            <div className="skeleton" style={{ width: "35%", height: "0.8125rem" }} />
            <div className="skeleton" style={{ width: "20%", height: "0.8125rem" }} />
          </div>
        </div>
      ))}
    </div>
  );
}