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

import { RendererProps } from './RendererProps';

const Div = styled.div<RendererProps>`
    width: 64px;
    padding-top: 2px;
    background: #666;

    span {
        height: 2px;
        display: block;
        width: 100%;
        border-top-style: solid;
        border-color: white;
        border-width: ${({ value }) => value};
        height: 28px;
        background: #999;
    }
`;

export const RendererOutlineOffset: FC<RendererProps> = ({ value }) => {
    return (
        <Div value={value}>
            <span />
        </Div>
    );
};