import * as React from "react";
import { cn } from "@/utils/helpers";

const Skeleton = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "animate-pulseOpacity rounded-md bg-secondarydark",
      className
    )}
    {...props}
  />
));

Skeleton.displayName = "Skeleton";

export { Skeleton };

import { Skeleton as AntdSkeleton } from "antd";

type AppSkeletonProps = React.ComponentProps<typeof AntdSkeleton>;

const AppSkeleton: React.FC<AppSkeletonProps> = ({
  className,
  active = true,
  avatar = false,
  title = false,
  paragraph = {
    rows: 1,
    width: "100%",
  },
  ...props
}) => (
  <AntdSkeleton
    className={cn("w-full", className)}
    title={title}
    paragraph={paragraph}
    avatar={avatar}
    active={active}
    {...props}
  />
);

AppSkeleton.displayName = "AppSkeleton";

export { AppSkeleton };