import React from 'react';

interface CardProps {
  children: React.ReactNode;
  title?: React.ReactNode;
  icon?: string;
  extra?: React.ReactNode;
  className?: string;
  bodyClassName?: string;
  noDivider?: boolean;
}

export function Card({
  children,
  title,
  icon,
  extra,
  className = '',
  bodyClassName = '',
  noDivider = true,
}: CardProps) {
  return (
    <div className={`card ${className}`}>
      {(title || extra) && (
        <div className={`card-header ${noDivider ? '' : 'border-b border-gray-100'}`}>
          {title && (
            <div className="card-title">
              {icon && <i className={`${icon} mr-2`}></i>}
              <span>{title}</span>
            </div>
          )}
          {extra && (
            <div className="card-extra">
              {extra}
            </div>
          )}
        </div>
      )}
      <div className={`card-body ${bodyClassName}`}>
        {children}
      </div>
    </div>
  );
}