"use client";

import { ReactNode } from "react";

interface CardProps {
    children: ReactNode;
    title?: string;
    description?: string;
    className?: string;
    headerAction?: ReactNode;
    noPadding?: boolean;
    onClick?: () => void;
    allowOverflow?: boolean;
}

export default function Card({
    children,
    title,
    description,
    className = "",
    headerAction,
    noPadding = false,
    onClick,
    allowOverflow = false
}: CardProps) {
    return (
        <div
            onClick={onClick}
            className={`bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 transition-all ${allowOverflow ? '' : 'overflow-hidden'} ${className}`}
        >
            {(title || description || headerAction) && (
                <div className="px-6 py-4 border-b border-zinc-100 dark:border-zinc-800 flex items-center justify-between">
                    <div>
                        {title && (
                            <h3 className="text-base font-bold text-zinc-900 dark:text-white">
                                {title}
                            </h3>
                        )}
                        {description && (
                            <p className="text-xs text-zinc-500 dark:text-zinc-400 mt-0.5">
                                {description}
                            </p>
                        )}
                    </div>
                    {headerAction && (
                        <div>{headerAction}</div>
                    )}
                </div>
            )}
            <div className={noPadding ? "" : "p-6"}>
                {children}
            </div>
        </div>
    );
}