'use client'

import { createContext, useContext, ReactNode } from 'react'
import { AuthClassNames, emptyClassNames } from '../styles/types'

const Context = createContext<AuthClassNames>(emptyClassNames)

interface StylesContextProps {
    children: ReactNode
    classNames?: AuthClassNames
}

export function StylesContext({ children, classNames }: StylesContextProps) {
    return (
        <Context value={classNames ?? emptyClassNames}>
            {children}
        </Context>
    )
}

/**
 * Hook to access auth component class names.
 *
 * Returns the class names provided to AllauthProvider, or empty strings if none provided.
 * Use this to style custom components consistently with the auth UI.
 *
 * @example
 * ```tsx
 * function MyAuthComponent() {
 *     const styles = useStyles()
 *     return (
 *         <div className={styles.card}>
 *             <h1 className={styles.title}>Custom Auth View</h1>
 *         </div>
 *     )
 * }
 * ```
 */
export function useStyles(): AuthClassNames {
    return useContext(Context)
}

/**
 * Utility to get a class name, returning empty string if undefined.
 * Useful for conditional class application.
 */
export function cx(...classNames: (string | undefined | false | null)[]): string {
    return classNames.filter(Boolean).join(' ')
}