import styled, { css } from 'styled-components'


export type RedactOverlayProps = {
  overlayImg: string
  initiallyRedacted: boolean
  currentlyRedacted: boolean
}

export const RedactOverlay = styled.div<RedactOverlayProps>`
  background-image: ${({ overlayImg }) => `url("${overlayImg}")`};
  opacity: ${({ currentlyRedacted }) => (currentlyRedacted ? 1 : 0)};
  position: absolute;
  inset: 0;

  ${({ initiallyRedacted }) =>
    initiallyRedacted &&
    css`
      transition: opacity 0.3s ${Math.random() * 0.8}s;
    `}
`