"use client";
/*
 * Documentation:
 * Loading Indicator Skeleton — https://app.subframe.com/f023064a5ca0/library?component=Loading+Indicator+Skeleton_08dee637-2ba5-4c5d-86d4-a531fd11481f
 */

import React from "react";
import * as SubframeUtils from "../../utils";

export interface LoadingIndicatorSkeletonRootProps
  extends React.HTMLAttributes<HTMLDivElement> {
  variant?: "card" | "list";
  className?: string;
}

const LoadingIndicatorSkeletonRoot = React.forwardRef<
  HTMLDivElement,
  LoadingIndicatorSkeletonRootProps
>(function LoadingIndicatorSkeletonRoot(
  {
    variant = "card",
    className,
    ...otherProps
  }: LoadingIndicatorSkeletonRootProps,
  ref
) {
  return (
    <div
      className={SubframeUtils.twClassNames(
        "group/08dee637 flex w-full items-start rounded-[8px] border border-solid border-[#e7e7e7] bg-surface-neutral-primary px-6 py-6 group/mtskeleton",
        { "border border-solid border-border-default": variant === "list" },
        className
      )}
      ref={ref}
      {...otherProps}
    >
      <div
        className={SubframeUtils.twClassNames(
          "flex grow shrink-0 basis-0 flex-col items-start gap-4",
          { hidden: variant === "list" }
        )}
      >
        <div className="flex items-center gap-3">
          <div className="flex h-10 w-10 flex-none items-start rounded-[9999px] bg-surface-neutral-tertiary animate-pulse" />
          <div className="flex min-w-[0px] flex-col items-start gap-2 flex-1">
            <div className="flex h-3 flex-none items-start rounded-[4px] bg-[#e7e7e7] w-1/2 animate-pulse" />
            <div className="flex h-3 flex-none items-start rounded-[4px] bg-[#e7e7e7] w-1/3 animate-pulse" />
          </div>
        </div>
        <div className="flex h-32 w-full flex-none items-start rounded-[4px] bg-surface-neutral-tertiary animate-pulse" />
        <div className="flex h-3 flex-none items-start rounded-[4px] bg-surface-neutral-tertiary w-1/3 animate-pulse" />
      </div>
      <div
        className={SubframeUtils.twClassNames(
          "hidden min-w-[0px] grow shrink-0 basis-0 flex-col items-start",
          { flex: variant === "list" }
        )}
      >
        <div className="flex w-full items-start gap-3 pb-4">
          <div className="flex h-8 w-8 flex-none items-start rounded-[4px] bg-surface-neutral-tertiary animate-pulse" />
          <div className="flex min-w-[0px] flex-col items-start gap-2 flex-1">
            <div className="flex h-20 w-full flex-none items-start rounded-[4px] bg-surface-neutral-tertiary animate-pulse" />
            <div className="flex h-3 flex-none items-start rounded-[4px] bg-surface-neutral-tertiary w-1/2 animate-pulse" />
          </div>
        </div>
        <div className="flex w-full items-center gap-3 border-t border-solid border-[#e7e7e7] py-4">
          <div className="flex h-8 w-8 flex-none items-start rounded-[4px] bg-surface-neutral-tertiary animate-pulse" />
          <div className="flex h-3 min-w-[0px] items-start rounded-[4px] bg-surface-neutral-tertiary flex-1 animate-pulse" />
        </div>
        <div className="flex w-full items-center gap-3 border-t border-solid border-[#e7e7e7] py-4">
          <div className="flex h-8 w-8 flex-none items-start rounded-[4px] bg-surface-neutral-disabled animate-pulse" />
          <div className="flex h-3 min-w-[0px] items-start rounded-[4px] bg-surface-neutral-tertiary flex-1 animate-pulse" />
        </div>
      </div>
    </div>
  );
});

export const LoadingIndicatorSkeleton = LoadingIndicatorSkeletonRoot;