import PropTypes from 'prop-types'
import Link from 'next/link'
import Image from 'next/image'
import {signIn} from 'next-auth/react'

export default function LoginProvider({id, title, width, height, callbackUrl}) {
  const hanleClick = event => {
    event.preventDefault()
    signIn(id, {
      callbackUrl
    })
  }

  return (
    <Link passHref href='/api/auth/signin'>
      <Image
        style={{cursor: 'pointer'}}
        width={width}
        height={height}
        alt={title}
        src={`/images/${id}.svg`}
        onClick={hanleClick}
      />
    </Link>
  )
}

LoginProvider.propTypes = {
  id: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  width: PropTypes.number.isRequired,
  height: PropTypes.number.isRequired,
  callbackUrl: PropTypes.string.isRequired
}