import React from 'react'

import { RedactableText } from '../RedactableText'

import { TextValue } from './style'


export type TraitValueProps = {
  children: string
  placeholder: string
  heading?: boolean
  light?: boolean
}

export const TraitValue = ({ children: value, placeholder, heading, light }: TraitValueProps) => {
  return (
    <TextValue heading={heading} light={light}>
      <RedactableText redact={!value}>{value || placeholder}</RedactableText>
    </TextValue>
  )
}