import React from 'react';

interface LabelOptionalProps {
  show: boolean;
  theme?: string;
}

const LabelOptional = ({ show, theme }: LabelOptionalProps) => {
  if (show !== true) return <span data-c="slmr--LabelOptional--empty"></span>;

  return (
    <sup data-c="slmr--LabelOptional" className={`text-xs text-dark ${theme}`}>
      {' (optional)'}
    </sup>
  );
};

export default LabelOptional;

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