import React, { FC } from 'react';
import styled from 'styled-components';

import { RendererProps } from './RendererProps';

const Div = styled.div<RendererProps>`
    animation: moveBackAndForth ${({ value }) => value}ms infinite alternate;

    @keyframes moveBackAndForth {
        from {
            padding-left: 0px;
        }
        to {
            padding-left: 100px;
        }
    }
`;

export const RendererDuration: FC<RendererProps> = ({ value }) => {
    return (
        <Div value={value}>
            <p>Lorem ipsum</p>
        </Div>
    );
};