import styled from "styled-components";

const FieldWrapper = styled.div<{ size: number }>`
  width: ${(p) => `${p.size}px`};
  height: ${(p) => `${p.size}px`};
  border: ${(p) => `2px solid ${p.theme.color.uiLine}`};
  border-radius: 50%;
  position: relative;
  cursor: pointer;

  &:hover {
    > div:last-child {
      opacity: 1;
    }
  }
`;

const DefaultImage = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: ${(p) => p.theme.color.uiBackground03};
`;

const IconWrapper = styled.div``;

const ImageContainer = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
`;

const HoverOverlay = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: rgba(0, 27, 60, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  ${(p) => p.theme.textStyle.uiM};
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.3s ease;
`;

export { FieldWrapper, IconWrapper, DefaultImage, ImageContainer, HoverOverlay };
