import styled from 'styled-components';
import { fadeIn, FADE_IN_TIME } from '../../animations/fadeIn';

export const BlockWrapper = styled.div<{
  src?: string;
  height: number;
  width: number;
}>`
  width: ${({ width }) => `${width}px`};
  height: ${({ height }) => `${height}px`};
  display: block;
  position: relative;
  transform: scale(1, 1);
  transition: transform 0.2s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: ${({ src }) => (src ? 1 : 0)};
  transition: opacity ${FADE_IN_TIME} ease-in-out;
  &:hover {
    cursor: pointer;
    transform: scale(1.02, 1.02);
    transition: transform 0.2s ease-in-out;
  }
`;

export const FilledCheckmarkWrapper = styled.div<{ width: number }>`
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
  animation: ${fadeIn} ${FADE_IN_TIME} forwards;
  &:after {
    border: 1px solid black;
    content: '';
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    opacity: 0;
    box-shadow: ${({ theme, width }) =>
      `0 0 0 ${width / 2}px inset ${theme.colors.neutral[0]}90`};
    transition: opacity ${FADE_IN_TIME} ease-in-out;
    opacity: 1;
    transition: opacity ${FADE_IN_TIME} ease-in-out;
  }
`;

export const BlockImage = styled.img<{ height: number; width: number }>`
  height: ${({ height }) => `${height}px`};
  width: ${({ width }) => `${width}px`};

  &:hover {
    border: 2px solid ${({ theme }) => theme.colors.neutral[200]};
  }
`;