// app/components/ui/SectionCard.tsx

import { LucideIcon } from 'lucide-react';
import { ReactNode } from 'react';

interface SectionCardProps {
    title: string;
    icon?: LucideIcon;
    children: ReactNode;
    description?: ReactNode;
    variant?: 'default' | 'alert' | 'highlight';
    className?: string;
}

export function SectionCard({
    title,
    icon: Icon,
    children,
    description,
    variant = 'default',
    className = ""
}: SectionCardProps) {

    // Define base styles for the card container
    let cardStyle = "rounded-3xl shadow-sm transition-all duration-300 ";
    let headerStyle = "text-xl font-black uppercase tracking-widest mb-4 flex items-center ";
    let iconStyle = "mr-3 shrink-0 ";
    let descStyle = "text-sm mb-6 leading-relaxed ";

    // Apply specific styles based on the chosen variant
    switch (variant) {
        case 'alert':
            cardStyle += "bg-emergency/10 border-2 border-emergency/30 p-6 md:p-8 hover:shadow-md";
            headerStyle += "text-emergency";
            iconStyle += "text-emergency";
            descStyle += "text-emergency/90 font-bold";
            break;

        case 'highlight':
            cardStyle += "bg-goldenrod/30 border border-goldenrod/20 p-5";
            headerStyle += "text-sm text-goldenrod mb-1";
            iconStyle += "text-goldenrod mt-0.5";
            descStyle += "text-ebony font-medium m-0";
            break;

        case 'default':
        default:
            cardStyle += "bg-white/40 backdrop-blur-md border border-white/40 p-6 md:p-8 hover:shadow-md";
            headerStyle += "text-ebony";
            iconStyle += "text-slate-teal";
            descStyle += "text-ebony/80 font-medium";
            break;
    }

    return (
        <section className={`${cardStyle} ${className}`}>
            <div className={variant === 'highlight' ? 'flex items-start' : ''}>
                {variant === 'highlight' && Icon && (
                    <Icon className={iconStyle} size={24} />
                )}

                <div className={variant === 'highlight' ? 'flex-1' : ''}>
                    <h2 className={headerStyle}>
                        {variant !== 'highlight' && Icon && <Icon className={iconStyle} size={24} />}
                        {title}
                    </h2>

                    {description && (
                        <div className={descStyle}>
                            {description}
                        </div>
                    )}

                    {variant === 'highlight' ? (
                        <div className="text-sm font-medium leading-relaxed text-ebony">
                            {children}
                        </div>
                    ) : (
                        children
                    )}
                </div>
            </div>
        </section>
    );
}