/**
 * Copyright (c) 2023-present Pi Dash Software, Inc. and contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 * See the LICENSE file for details.
 */

// pi dash ui
import { Loader } from "@pi-dash/ui";

export function StickiesLoader() {
  return (
    <div className="grid grid-cols-4 gap-4 overflow-scroll pb-2">
      {Array.from({ length: 4 }).map((_, index) => (
        <Loader key={index} className="space-y-5 rounded-sm border border-subtle p-3">
          <div className="space-y-2">
            <Loader.Item height="20px" />
            <Loader.Item height="15px" width="75%" />
          </div>
          <div className="space-y-2">
            <div className="flex items-center gap-2">
              <Loader.Item height="15px" width="15px" className="flex-shrink-0" />
              <Loader.Item height="15px" width="100%" />
            </div>
            <div className="flex items-center gap-2">
              <Loader.Item height="15px" width="15px" className="flex-shrink-0" />
              <Loader.Item height="15px" width="75%" />
            </div>
            <div className="flex items-center gap-2">
              <Loader.Item height="15px" width="15px" className="flex-shrink-0" />
              <Loader.Item height="15px" width="90%" />
            </div>
            <div className="flex items-center gap-2">
              <Loader.Item height="15px" width="15px" className="flex-shrink-0" />
              <Loader.Item height="15px" width="60%" />
            </div>
            <div className="flex items-center gap-2">
              <Loader.Item height="15px" width="15px" className="flex-shrink-0" />
              <Loader.Item height="15px" width="50%" />
            </div>
          </div>
          <div className="flex items-center justify-between gap-2">
            <div className="flex items-center gap-2">
              <Loader.Item height="25px" width="25px" />
              <Loader.Item height="25px" width="25px" />
              <Loader.Item height="25px" width="25px" />
            </div>
            <Loader.Item height="25px" width="25px" className="flex-shrink-0" />
          </div>
        </Loader>
      ))}
    </div>
  );
}
