export default function RideLoading() {
  return (
    <div style={{ minHeight: "100vh", background: "var(--color-bg)", padding: "32px 24px" }}>
      <div style={{ maxWidth: 960, margin: "0 auto" }}>
        <div className="skeleton" style={{ width: 160, height: 14, borderRadius: 4, marginBottom: 16 }} />
        <div className="skeleton" style={{ width: 320, height: 28, borderRadius: 6, marginBottom: 24 }} />
        <div className="skeleton" style={{ width: 100, height: 24, borderRadius: 999, marginBottom: 24 }} />
        <div style={{ display: "flex", gap: 8, marginBottom: 16 }}>
          {Array.from({ length: 3 }).map((_, i) => (
            <div key={i} className="skeleton" style={{ width: 80, height: 32, borderRadius: 6 }} />
          ))}
        </div>
        <div className="skeleton" style={{ width: "100%", height: 280, borderRadius: 8 }} />
      </div>
    </div>
  );
}