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

import v from '../../styles/Variables';

interface Props {
  show: boolean;
}

const LabelOptional = ({ show }: Props) => {
  if (show !== true) return <></>;

  return <Label data-test="component-buttonGroup-required">{' (optional)'}</Label>;
};

export default LabelOptional;

/* styles */
const Label = styled.sup`
  color: ${v.colors.dark666};
  font-size: 12px;
`;
