import React, { forwardRef } from "react";
import { cx } from "../../../utils";
import { getRoundness, getSkeletonColor } from "../../../mixins";
import { classes } from "../tokens";
import { base as sizeCSS } from "./variations/_size/base";
import { base as viewCSS } from "./variations/_view/base";
import { StyledVisibleLine, base } from "./LineSkeleton.styles";
/**
 * Копонент-составляющая Скелетона
 */ export const lineSkeletonRoot = (Root)=>/*#__PURE__*/ forwardRef(({ size, lighter, customGradientColor, roundness = '16', animationType = 'shimmer', customFadeInColor, customFadeOutColor, view, className, ...rest }, outerRootRef)=>{
        const animationClass = classes[`${animationType}Animation`];
        const roundnessValue = getRoundness({
            roundness
        });
        const skeletonGradientColor = getSkeletonColor({
            lighter,
            customGradientColor
        });
        return /*#__PURE__*/ React.createElement(Root, {
            ref: outerRootRef,
            size: size,
            view: view,
            ...rest
        }, /*#__PURE__*/ React.createElement(StyledVisibleLine, {
            className: cx(className, animationClass),
            roundness: roundnessValue,
            gradientColor: skeletonGradientColor,
            customFadeInColor: customFadeInColor,
            customFadeOutColor: customFadeOutColor
        }));
    });
export const lineSkeletonConfig = {
    name: 'LineSkeleton',
    tag: 'div',
    layout: lineSkeletonRoot,
    base,
    variations: {
        size: {
            css: sizeCSS
        },
        view: {
            css: viewCSS
        }
    },
    defaults: {}
};
