/**
 * Class names for styling the auth components.
 *
 * All properties are optional - components will use empty strings as defaults.
 * Pass your own CSS module or Tailwind classes to customize the appearance.
 *
 * @example
 * ```tsx
 * // With CSS Modules
 * import styles from './auth.module.css'
 * <AllauthProvider classNames={styles}>
 *
 * // With Tailwind
 * const classNames = {
 *   container: 'max-w-md mx-auto p-4',
 *   card: 'bg-white rounded-lg shadow-lg p-6',
 *   title: 'text-2xl font-bold',
 *   // ...
 * }
 * <AllauthProvider classNames={classNames}>
 * ```
 */
export interface AuthClassNames {
    // Layout
    container?: string
    card?: string

    // Typography
    title?: string
    subtitle?: string

    // Form elements
    form?: string
    fieldsContainer?: string
    field?: string
    fieldLabel?: string
    fieldInput?: string
    fieldHelp?: string
    fieldError?: string
    required?: string

    // Buttons
    submit?: string
    link?: string
    smallButton?: string
    smallButtonPrimary?: string
    smallButtonSecondary?: string
    smallButtonDanger?: string

    // Feedback
    error?: string
    success?: string
    loading?: string
    spinner?: string
    emptyState?: string

    // Divider
    divider?: string
    dividerText?: string

    // Footer
    footer?: string

    // Code input (for TOTP/login codes)
    codeInput?: string

    // OAuth providers
    providersContainer?: string
    providerButtons?: string
    providerButton?: string

    // Passkey
    passkeyContainer?: string
    passkeyButton?: string

    // Settings page
    settingsContainer?: string
    settingsPageTitle?: string
    settingsCard?: string
    settingsSection?: string
    settingsSectionTitle?: string
    settingsSubtitle?: string
    settingsList?: string
    settingsItem?: string
    settingsItemInfo?: string
    settingsItemLabel?: string
    settingsItemMeta?: string
    settingsItemActions?: string

    // Badges
    badge?: string
    badgePrimary?: string
    badgeUnverified?: string
    badgeSuccess?: string
    badgeDanger?: string

    // Inline form
    inlineForm?: string

    // TOTP setup
    totpSetup?: string
    qrCode?: string

    // Recovery codes
    recoveryCodes?: string

    // Form controls
    checkbox?: string
    radioGroup?: string
    radioItem?: string

    // Navigation
    navLinks?: string
    navLink?: string
    navLinkActive?: string
}

/**
 * Empty class names - used as default when no styles provided.
 * Components will render without any styling classes.
 */
export const emptyClassNames: AuthClassNames = {}
