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

import { RendererProps } from './RendererProps';

const Div = styled.div<RendererProps>`
    background: white;
    width: 48px;
    height: 48px
    padding: 8px 0 0 8px;
    background: ${({ value }) => (value === 'white' ? 'black' : 'white')};


    span {
        display: block;
        width: 40px;
        height: 40px;
        border-width: 2px;
        border-style: solid;
        border-top-left-radius: 16px;
        border-color: ${({ value }) => value};
        border-right: none;
        border-bottom: none;
    }
`;

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