/**
 * AuthCard Component
 * @description Reusable authentication card with gradient background.
 * Can be used for Sign In, Sign Up, Forgot Password, and other auth screens.
 * Follows AgenticIQ Enterprise Coding Guidelines v1.0
 */

import { type ReactNode } from 'react';

/**
 * Props for AuthCard component
 */
interface AuthCardProps {
    /** Child elements to render inside the card */
    children: ReactNode;
    /** Additional CSS classes for customization */
    className?: string;
    /** Card variant - 'signin' has standard padding, 'register' has compact padding */
    variant?: 'signin' | 'register';
}

/**
 * Props for AuthCardHeader component
 */
interface AuthCardHeaderProps {
    /** Main title text */
    title: string;
    /** Subtitle/description text */
    subtitle?: string;
}

/**
 * Props for AuthCardContent component
 */
interface AuthCardContentProps {
    /** Child elements (form fields, etc.) */
    children: ReactNode;
    /** Additional CSS classes */
    className?: string;
}

/**
 * AuthCard component
 * @description Main container with gradient background (teal to dark blue).
 * Provides the card structure for authentication screens.
 * No border to avoid dark line artifacts.
 * @param {AuthCardProps} props - Component props
 * @returns {JSX.Element} AuthCard element
 */
export function AuthCard({ children, className = '', variant = 'signin' }: AuthCardProps): JSX.Element {
    const isRegister = variant === 'register';

    return (
        <div
            className={`
                flex flex-col items-center gap-8
                w-[520px] max-w-full
                rounded-[32px]
                shadow-[0px_4px_24px_0px_rgba(0,0,0,0.15)]
                ${isRegister ? 'px-[42px] py-[64px]' : 'px-[60px] py-[80px]'}
                ${className}
            `}
            style={{
                background: 'linear-gradient(180deg, #00b8b7 0%, #001c8e 100%)',
            }}
        >
            {children}
        </div>
    );
}

/**
 * AuthCardHeader component
 * @description Header section with title and optional subtitle.
 * @param {AuthCardHeaderProps} props - Component props
 * @returns {JSX.Element} AuthCardHeader element
 */
export function AuthCardHeader({ title, subtitle }: AuthCardHeaderProps): JSX.Element {
    return (
        <div className="flex flex-col items-center w-full">
            <div className="flex flex-col items-center gap-2 w-full text-center">
                <h2 className="text-[30px] font-semibold leading-[38px] text-white w-full">
                    {title}
                </h2>
                {subtitle && (
                    <p className="text-[18px] font-medium leading-6 text-[rgba(255,255,255,0.75)]">
                        {subtitle}
                    </p>
                )}
            </div>
        </div>
    );
}

/**
 * AuthCardContent component
 * @description Content section for form fields and actions.
 * @param {AuthCardContentProps} props - Component props
 * @returns {JSX.Element} AuthCardContent element
 */
export function AuthCardContent({ children, className = '' }: AuthCardContentProps): JSX.Element {
    return (
        <div className={`flex flex-col items-center gap-6 w-full rounded-xl ${className}`}>
            {children}
        </div>
    );
}

