/**
 * 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 imports
import { Loader } from "@pi-dash/ui";
import { cn } from "@pi-dash/utils";

type Props = {
  className?: string;
};

export function DescriptionInputLoader(props: Props) {
  const { className } = props;

  return (
    <Loader className={cn("space-y-2", className)}>
      <Loader.Item width="100%" height="26px" />
      <div className="flex items-center gap-2">
        <Loader.Item width="26px" height="26px" />
        <Loader.Item width="400px" height="26px" />
      </div>
      <div className="flex items-center gap-2">
        <Loader.Item width="26px" height="26px" />
        <Loader.Item width="400px" height="26px" />
      </div>
      <Loader.Item width="80%" height="26px" />
      <div className="flex items-center gap-2">
        <Loader.Item width="50%" height="26px" />
      </div>
      <div className="border-0.5 absolute right-3.5 bottom-2 z-10 flex items-center gap-2">
        <Loader.Item width="100px" height="26px" />
        <Loader.Item width="50px" height="26px" />
      </div>
    </Loader>
  );
}
