'use client'

import { ReactNode } from 'react'
import { useRouter } from '../contexts/RouterContext'
import { useStyles } from '../contexts/StylesContext'

interface FooterLink {
    label: string
    href?: string
    onClick?: () => void
}

interface AuthCardProps {
    title: string
    subtitle?: string
    children?: ReactNode
    footerLinks?: FooterLink[]
    error?: string
    success?: string
    loading?: boolean
    loadingText?: string
}

export function AuthCard({
    title,
    subtitle,
    children,
    footerLinks,
    error,
    success,
    loading,
    loadingText = 'Loading...',
}: AuthCardProps) {
    const router = useRouter()
    const styles = useStyles()

    const handleLinkClick = (e: React.MouseEvent, href: string) => {
        e.preventDefault()
        router.push(href)
    }

    return (
        <div className={styles.container}>
            <div className={styles.card}>
                {loading ? (
                    <div className={styles.loading}>
                        <div className={styles.spinner} />
                        <p className={styles.subtitle}>{loadingText}</p>
                    </div>
                ) : (
                    <>
                        <h1 className={styles.title}>{title}</h1>
                        {subtitle && <p className={styles.subtitle}>{subtitle}</p>}

                        {error && <div className={styles.error}>{error}</div>}
                        {success && <div className={styles.success}>{success}</div>}

                        {children}

                        {footerLinks && footerLinks.length > 0 && (
                            <div className={styles.footer}>
                                {footerLinks.map((link, i) => (
                                    link.onClick ? (
                                        <button key={i} onClick={link.onClick} className={styles.link}>
                                            {link.label}
                                        </button>
                                    ) : link.href ? (
                                        <a
                                            key={i}
                                            href={link.href}
                                            onClick={(e) => handleLinkClick(e, link.href!)}
                                            className={styles.link}
                                        >
                                            {link.label}
                                        </a>
                                    ) : null
                                ))}
                            </div>
                        )}
                    </>
                )}
            </div>
        </div>
    )
}