import { useState } from 'react'

import styled from 'styled-components/macro'

type LogoImgProps = {
  isLogoError: boolean,
}
export const LogoImg = styled.img<LogoImgProps>`
  height: 25px;
  width: 25px;
  margin-right: 15px;
  display: ${({ isLogoError }) => (isLogoError ? 'none' : '')};
  filter: grayscale(1);

  :hover {
    filter: none;
  }
`

type Props = {
  src: string,
}

export const TeamLogoImg = ({
  src,
}: Props) => {
  const [isLogoError, setIsImgError] = useState(true)

  const onError = () => setIsImgError(true)
  const onLoad = () => setIsImgError(false)

  return (
    <LogoImg
      src={src}
      onError={onError}
      onLoad={onLoad}
      isLogoError={isLogoError}
    />
  )
}