import React from 'react';
import styled from 'styled-components';

const Postfix = styled.h4`
    font-size: 14px;
    margin: 0;
`;
const Wrapper = styled.span`
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-contents: space-between;
`;

const formatter = new Intl.NumberFormat('pt-BR', {
    style: 'currency',
    currency: 'BRL',
});

function Currency({ value }: { value: number }) {
    const formatted = formatter.format(value);

    return (
        <Wrapper>
            <Postfix>{formatted}</Postfix>
        </Wrapper>
    );
}

Currency.Wrapper = Wrapper;

export default Currency;