import React from 'react'
import { useUser } from 'web/hooks/use-user'
import { firebaseLogin } from 'web/lib/firebase/users'
import { withTracking } from 'web/lib/service/analytics'
import { Button, SizeType } from './button'

export function SignUpPrompt(props: {
  label?: string
  className?: string
  size?: SizeType
}) {
  const { label, className, size = 'lg' } = props
  const user = useUser()

  return user === null ? (
    <Button
      onClick={withTracking(firebaseLogin, 'sign up to bet')}
      className={className}
      size={size}
      color="gradient"
    >
      {label ?? 'Sign up to bet!'}
    </Button>
  ) : null
}