import React from 'react';
import { twMerge } from 'tailwind-merge';

interface CardProps {
    children: React.ReactNode;
    className?: string;
    title?: string;
    description?: string;
    actions?: React.ReactNode;
    onClick?: () => void;
}

export const Card: React.FC<CardProps> = ({ children, className, title, description, actions, onClick }) => {
    return (
        <div
            onClick={onClick}
            className={twMerge(
                'glass-card rounded-[24px] p-6 border border-white/5',
                'hover:border-primary/20 hover:shadow-lg transition-all duration-500',
                onClick ? 'cursor-pointer active:scale-[0.98]' : '',
                className
            )}
        >
            {(title || actions) && (
                <div className="flex justify-between items-start mb-6">
                    <div>
                        {title && <h3 className="text-xl font-bold text-text-main tracking-tight">{title}</h3>}
                        {description && <p className="text-sm text-text-muted font-medium mt-1">{description}</p>}
                    </div>
                    {actions && <div className="flex gap-2">{actions}</div>}
                </div>
            )}
            <div className="text-text-main">{children}</div>
        </div>
    );
};