import React, { ReactEventHandler } from "react";
import styled from "styled-components";
import useImageLoad from "../hooks/useImageLoad";

interface WaifuCardImageProps {
  src: string;
  alt: string;
}

const WaifuCardImage: React.FC<WaifuCardImageProps> = ({ src, alt }) => {
  const [ref, loaded, onLoad] = useImageLoad();

  return (
    <>
      <Picture
        ref={ref as React.Ref<any>}
        style={{ opacity: loaded ? 1 : 0 }}
        onLoad={onLoad as ReactEventHandler<HTMLImageElement>}
        src={src}
        alt={alt}
        loading="lazy"
      />
    </>
  );
};

const Picture = styled.img<{ loaded?: boolean }>`
  object-fit: contain;
  height: ${(props) => (props.loaded ? "0" : "100%")};
  width: 100%;
  transform: scale(1.1);
  user-drag: none;
  user-select: none;
  opacity: ${(props) => (props.loaded ? 0 : 1)};
  transition: all 1s;
`;

export default WaifuCardImage;