'use client'

import { useConfig } from '../contexts/AuthContext'
import { useAllauthAPI } from '../contexts/APIContext'
import { useStyles } from '../contexts/StylesContext'

interface Provider {
    id: string
    name: string
}

interface ProviderListProps {
    callbackUrl: string
    process?: 'login' | 'connect'
}

export function ProviderList({ callbackUrl, process = 'login' }: ProviderListProps) {
    const config = useConfig()
    const api = useAllauthAPI()
    const styles = useStyles()

    const providers: Provider[] = config?.data?.socialaccount?.providers || []

    if (providers.length === 0) {
        return null
    }

    const handleProviderClick = (providerId: string) => {
        const provider = api.oauth.provider(providerId)
        if (process === 'connect') {
            provider.connect.withRedirect(callbackUrl)
        } else {
            provider.login.withRedirect(callbackUrl)
        }
    }

    return (
        <div className={styles.providersContainer}>
            <div className={styles.divider}>
                <span className={styles.dividerText}>or continue with</span>
            </div>
            <div className={styles.providerButtons}>
                {providers.map((provider) => (
                    <button
                        key={provider.id}
                        type="button"
                        onClick={() => handleProviderClick(provider.id)}
                        className={styles.providerButton}
                    >
                        {provider.name}
                    </button>
                ))}
            </div>
        </div>
    )
}