import React, { ReactChildren } from 'react';
import styled from 'styled-components';

interface Props {
  /**
   * any valid jsx that  will render inside the opacity block
   */
  children: ReactChildren;
  /**
   * whole number of the opacity you want to accomplish, will be converted to decimal automatically. From 1-9.
   */
  opacity: number;
}

interface Styles {
  opacity: number;
}

const Opacity = ({ children, opacity }: Props) => {
  return <O opacity={opacity}>{children}</O>;
};

export default Opacity;

/* styles */
const O = styled.span<Styles>`
  opacity: ${({ opacity }) => `0.${opacity}`};
  display: inline-block;
`;