import React from 'react';
import { cn } from "@/utils";

interface SettingCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
    title: React.ReactNode;
    description?: string;
    action?: React.ReactNode;
    footer?: React.ReactNode;
}

export const SettingCard = React.forwardRef<HTMLDivElement, SettingCardProps>(
    ({ className, title, description, action, footer, children, ...props }, ref) => (
        <div 
            ref={ref}
            className={cn("bg-card border border-border rounded-xl p-5 flex flex-col gap-4 hover:border-primary/50 transition-colors group", className)}
            {...props}
        >
            <div className="flex items-start justify-between">
                <div>
                    <div className="flex items-center gap-2">
                        {typeof title === 'string' ? (
                            <h3 className="font-semibold text-foreground">{title}</h3>
                        ) : (
                            title
                        )}
                    </div>
                    {description && <p className="text-xs text-muted-foreground mt-1">{description}</p>}
                </div>
                {action && <div className="h-8 flex items-center">{action}</div>}
            </div>
            
            <div className="relative">
                {children}
            </div>

            {footer && (
                <div className="flex items-center gap-1.5 text-[10px] text-muted-foreground/60">
                    {footer}
                </div>
            )}
        </div>
    )
);
SettingCard.displayName = "SettingCard";
