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

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

  return (
    <Link passHref href='/api/auth/signin'>
      <Button variant='outlined' color='info' startIcon={
        <Image
          width={width}
          height={height}
          alt={title}
          src={`/images/${id === 'twitter' ? 'x' : id}.svg`}
        />
      } onClick={hanleClick}
      >
        {title}
      </Button>
    </Link>
  )
}

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