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

import { RendererProps } from './RendererProps';

const Div = styled.div<RendererProps & { invert: boolean }>`
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    font-size: 20px;
    font-weight: 700;
    color: ${({ invert }) => (invert ? 'white' : 'black')};
    background-color: ${({ value }) => value};
`;

export const RendererSwatch: FC<RendererProps> = ({ value, name }) => {
    const swatch = Number(name?.split('.').pop());
    return (
        <Div value={value} invert={swatch >= 300}>
            A
        </Div>
    );
};