'use client';

import React from 'react';
import { cn } from '@/shared/lib/utils';
import { BrandLogo } from '@/features/shared/components/brand/brand-logo';

interface AuthCardProps {
    children: React.ReactNode;
    title: string;
    description?: string;
    className?: string;
    footer?: React.ReactNode;
}

/**
 * EN: Shared component for consistent Auth page layouts
 * VI: Component dùng chung cho layout nhất quán giữa các trang Auth
 */
export function AuthCard({
    children,
    title,
    description,
    className,
    footer
}: AuthCardProps) {
    return (
        <div className="flex min-h-[calc(100vh-3.5rem)] flex-col items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
            <div className="w-full max-w-md md:max-w-[400px] space-y-8 flex flex-col items-center">
                {/* EN: Logo & Header / VI: Logo & Tiêu đề */}
                <div className="flex flex-col items-center">
                    <BrandLogo variant="icon" size="lg" className="mb-6" />
                    <h1 className="text-3xl font-bold text-text-primary tracking-tight">
                        {title}
                    </h1>
                    {description && (
                        <p className="mt-2 text-sm text-text-secondary">
                            {description}
                        </p>
                    )}
                </div>

                {/* EN: Main Content / VI: Nội dung chính */}
                <div className={cn(
                    'w-full glass-card p-8 rounded-3xl shadow-glass-lg border border-glass-medium',
                    'animate-in fade-in zoom-in-95 duration-normal',
                    className
                )}>
                    {children}

                    {footer && (
                        <div className="text-center text-sm text-text-secondary mt-8">
                            {footer}
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
}
