import { initiateOAuth, useAuth } from '@/core'
import { Button, Text, View } from '@/ui'
import { useMemo } from 'react'

export function AuthProviders() {
  const { status } = useAuth()
  const isLoading = useMemo(() => status === 'loading', [status])

  return (
    <View className="items-center space-y-4">
      <Button
        className="bg-[#5865F2] hover:bg-[#4752C4] active:bg-[#3C45A5] w-full max-w-[300px]"
        onPress={() => initiateOAuth('discord')}
        disabled={isLoading}
      >
        <View className="flex-row items-center space-x-2">
          {isLoading ? (
            <Text className="text-white font-bold">Loading...</Text>
          ) : (
            <Text className="text-white font-bold">Continue with Discord</Text>
          )}
        </View>
      </Button>
      <Button
        className="bg-black hover:bg-gray-800 active:bg-gray-900 w-full max-w-[300px] opacity-25"
        onPress={() => initiateOAuth('apple')}
        disabled={true}
      >
        <View className="flex-row items-center space-x-2">
          <Text className="text-white font-bold">Continue with Apple</Text>
        </View>
      </Button>
      <Button
        className="bg-white hover:bg-gray-100 active:bg-gray-200 w-full max-w-[300px] border border-gray-300 opacity-25"
        onPress={() => initiateOAuth('google')}
        disabled={true}
      >
        <View className="flex-row items-center space-x-2">
          <Text className="text-black font-bold">Continue with Google</Text>
        </View>
      </Button>
    </View>
  )
}