import { ReactNode } from 'react';
import clsx from 'clsx';

interface CardProps {
  title?: string | ReactNode;
  children: ReactNode;
  className?: string;
}

export const Card = ({ title, children, className }: CardProps) => {
  return (
    <div className={clsx('bg-dark-800 rounded-xl border border-dark-600 shadow-sm overflow-hidden', className)}>
      {title && (
        <div className="px-6 py-4 border-b border-dark-600">
          <h3 className="text-lg font-semibold text-white">{title}</h3>
        </div>
      )}
      <div className="p-6">{children}</div>
    </div>
  );
};