/* @flow */ import React from 'react' import classnames from 'classnames' import { globalProps } from '../utilities/globalProps.js' import { Body, Caption, Title } from '../' import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props' type CurrencyProps = { align?: 'center' | 'left' | 'right', amount: string, aria?: object, className?: string, dark?: boolean, data?: object, emphasized?: boolean, id?: string, label?: string, size?: 'sm' | 'md' | 'lg', symbol?: string, variant?: 'default' | 'light' | 'bold', unit?: string, } const sizes = { lg: 1, md: 3, sm: 4, } const Currency = (props: CurrencyProps) => { const { align = 'left', aria = {}, amount, data = {}, emphasized = true, id, unit, className, label = '', size = 'sm', symbol = '$', variant = 'default', dark = false, } = props const emphasizedClass = emphasized ? '' : '_deemphasized' let variantClass if (size === 'sm') { if (variant === 'light') { variantClass = '_light' } else if (variant === 'bold') { variantClass = '_bold' } } const [whole, decimal = '00'] = amount.split('.') const ariaProps = buildAriaProps(aria) const dataProps = buildDataProps(data) const classes = classnames( buildCss('pb_currency_kit', align, size, { dark }), globalProps(props), className ) return (
{label}
{symbol} {`${whole}`} {unit} {`.${decimal}`}
) } export default Currency