import React, { forwardRef } from "react";
import { cx } from "../../../utils";
import { getRoundness, getSkeletonColor } from "../../../mixins";
import { classes } from "../tokens";
import { StyledRectSkeleton } from "./RectSkeleton.styles";
/**
 * Компонент для создания прямоугольного плейсхолдера.
 */ export const RectSkeleton = /*#__PURE__*/ forwardRef(({ width, height, lighter, customGradientColor, roundness = '16', animationType = 'shimmer', customFadeInColor, customFadeOutColor, className, ...rest }, outerRootRef)=>{
    const animationClass = classes[`${animationType}Animation`];
    const roundnessValue = getRoundness({
        roundness
    });
    const skeletonGradientColor = getSkeletonColor({
        lighter,
        customGradientColor
    });
    return /*#__PURE__*/ React.createElement(StyledRectSkeleton, {
        ref: outerRootRef,
        className: cx(className, animationClass),
        roundness: roundnessValue,
        gradientColor: skeletonGradientColor,
        customFadeInColor: customFadeInColor,
        customFadeOutColor: customFadeOutColor,
        width: Number.isNaN(Number(width)) ? String(width) : `${width}px`,
        height: Number.isNaN(Number(height)) ? String(height) : `${height}px`,
        ...rest
    });
});
