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

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

  return (
    <Link passHref href='/api/auth/signin'>
      <Button
        variant='outlined'
        size='large'
        color='primary'
        startIcon={icon}
        onClick={hanleClick}
      >
        {title}
      </Button>
    </Link>
  )
}

LoginProvider.propTypes = {
  id: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  icon: PropTypes.node.isRequired,
  callbackUrl: PropTypes.string.isRequired
}