/** @jsxImportSource @emotion/react */
import { css, keyframes } from '@emotion/css';
import type { ReactNode } from 'react';

const breatheAnimation = keyframes`
  0% { transform: translateX(-50%); opacity:1}
  80% {opacity: 0.3}
  100% { transform: translateX(400%); opacity:0}
`;

const animatedContainerStyles = css`
  position: absolute;
  display: inline-flex;
  top: -14px;
  left: 0;
  opacity: 5;
  overflow: hidden;
  animation-name: ${breatheAnimation};
  animation-duration: 5s;
  animation-iteration-count: 2;
  animation-fill-mode: forwards;
`;

export const AnimatedContainer = ({ children }: { children: ReactNode }) => (
  <div className={animatedContainerStyles}>{children}</div>
);

export default AnimatedContainer;