import React from 'react';

import { AnimationStyleProps } from '../type';
import { shakeKeyFrame } from '../style';
import { css } from '@emotion/css';
import { useWebMergeStyles } from '@cleartrip/ct-design-style-manager';

const shakeClassName = css`
  animation-duration: 1s;
  animation-fill-mode: both;
  animation: ${shakeKeyFrame} 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
`;

const Shake: React.FC<AnimationStyleProps> = ({ children, styleConfig }) => {
  const { root = [] } = styleConfig ?? {};

  const rootClassName = useWebMergeStyles([...root, shakeClassName], [root, shakeClassName]);
  return <div className={rootClassName}>{children}</div>;
};

export default Shake;