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

import { RendererProps } from './RendererProps';

const Div = styled.div<RendererProps>`
    font-family: ${({ value }) => value};
    font-size: 20px;
    font-weight: 400;

    p:first-child {
        font-weight: 500;
    }

    p:last-child {
        font-weight: 700;
    }
`;

export const RendererTypeface: FC<RendererProps> = ({ value }) => {
    return (
        <Div value={value}>
            <p>Lorem ipsum dolor sit amet (400)</p>
            <p>Lorem ipsum dolor sit amet (500)</p>
            <p>Lorem ipsum dolor sit amet (700)</p>
        </Div>
    );
};