// app/components/ui/SectionCard.tsx

import React, { ReactNode } from 'react';
import { LucideIcon } from 'lucide-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) {

    let cardStyle = "rounded-3xl shadow-sm transition-all duration-300 p-6 md:p-8 hover:shadow-md ";
    let headerStyle = "text-xl font-black uppercase tracking-widest flex items-center ";
    let iconStyle = "mr-3 shrink-0 ";
    let descStyle = "text-sm leading-relaxed ";

    switch (variant) {
        case 'alert':
            cardStyle += "bg-emergency/10 backdrop-blur-md border-2 border-emergency/30";
            headerStyle += "text-emergency";
            iconStyle += "text-emergency";
            descStyle += "text-emergency/90 font-bold";
            break;

        case 'highlight':
            cardStyle += "bg-goldenrod/30 backdrop-blur-md border border-goldenrod/20";
            headerStyle += "text-goldenrod";
            iconStyle += "text-goldenrod";
            descStyle += "text-ebony font-medium";
            break;

        case 'default':
        default:
            cardStyle += "bg-white/40 backdrop-blur-md border border-white/40";
            headerStyle += "text-ebony";
            iconStyle += "text-slate-teal";
            descStyle += "text-ebony/80 font-medium";
            break;
    }
    const hasChildren = React.Children.toArray(children).length > 0;

    return (
        <section className={`${cardStyle} ${className}`}>

            <h2 className={`${headerStyle} ${(description || hasChildren) ? 'mb-4' : 'mb-0'}`}>
                {Icon && <Icon className={iconStyle} size={24} />}
                {title}
            </h2>

            {description && (
                <div className={`${descStyle} ${hasChildren ? 'mb-6' : 'mb-0'}`}>
                    {description}
                </div>
            )}

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

        </section>
    );
}