import React from 'react';
import { cx } from '../../../utils/cx';

interface FormContainerProps {
    children: React.ReactNode;
    title?: string;
    description?: string;
    variant?: 'default' | 'aman' | 'barelux';
    bordered?: boolean;
    className?: string;
}

export const FormContainer = ({ 
    children,
    title,
    description,
    variant = 'default',
    bordered = false,
    className
}: FormContainerProps) => {
    const isAman = variant === 'aman';
    const isBarelux = variant === 'barelux';

    // Container styles based on variant and bordered prop
    const containerClassName = cx(
        'bg-white p-6 md:p-8',
        bordered && 'border border-secondary',
        isAman && bordered && '', // No rounded corners for Aman
        !isAman && bordered && 'rounded-lg', // Default and Barelux have rounded corners
        className
    );

    // Title styles based on variant
    const titleClassName = cx(
        isAman && 'font-heading text-2xl font-light uppercase tracking-wide text-primary',
        isBarelux && 'font-heading text-2xl font-semibold text-primary',
        !isAman && !isBarelux && 'font-display text-2xl font-semibold text-primary'
    );

    // Description styles based on variant
    const descriptionClassName = cx(
        'mt-2 text-base text-tertiary',
        isAman && 'font-body',
        isBarelux && 'font-body',
        !isAman && !isBarelux && 'font-body'
    );

    return (
        <div className={containerClassName}>
            {(title || description) && (
                <div className="mb-6">
                    {title && (
                        <h2 className={titleClassName}>
                            {title}
                        </h2>
                    )}
                    {description && (
                        <p className={descriptionClassName}>
                            {description}
                        </p>
                    )}
                </div>
            )}
            {children}
        </div>
    );
};
