/**
 * Contenedor tipo card (borde, radio 16px, fondo blanco).
 * Frame compartido por pantallas de configuración/empresa; el consumidor puede usarlo con `children` custom.
 *
 * @param {string} [className]
 * @param {object} [style] — Se fusiona con el estilo base del contenedor.
 */
export const CardGrande = ({
  className = '',
  style,
  children,
  ...props
}) => {
  return (
    <div
      className={`anima-cardgrande__container ${className}`.trim()}
      style={{
        width: '100%',
        borderRadius: '16px',
        border: '1px solid #C4C4C4',
        backgroundColor: '#FFFFFF',
        opacity: 1,
        boxSizing: 'border-box',
        display: 'flex',
        flexDirection: 'column',
        overflow: 'hidden',
        ...(style || {}),
      }}
      {...props}
    >
      {children}
    </div>
  );
};

export default CardGrande;

