/**
 * Card Component - ProRank SEO
 *
 * Shared card primitive backed by the shipped ProRank card styles.
 */

import React from 'react';
import clsx from 'clsx';

const Card = ({
  children,
  header,
  footer,
  variant = 'default',
  padding = 'default',
  hoverable = false,
  className = '',
  headerClassName = '',
  footerClassName = '',
  bodyClassName = '',
  ...props
}) => {
  const cardClasses = clsx(
    variant === 'elevated' ? 'prorank-card-modern' : 'prorank-card',
    {
      'prorank-card-premium': variant === 'performance',
    },
    className
  );

  const bodyClasses = clsx(
    {
      'prorank-card-body-small': padding === 'sm',
      'prorank-card-body': padding === 'default' || padding === 'none',
      'prorank-card-body-large': padding === 'lg',
    },
    bodyClassName
  );

  const cardStyle = {
    ...(variant === 'outlined' ? { borderWidth: '2px' } : {}),
    ...(variant === 'flat' ? { background: '#f9fafb' } : {}),
    ...(hoverable ? { cursor: 'pointer' } : {}),
  };

  const bodyStyle = padding === 'none' ? { padding: 0 } : undefined;

  return (
    <div className={cardClasses} style={cardStyle} {...props}>
      {header && (
        <div className={clsx('prorank-card-header', headerClassName)}>
          {header}
        </div>
      )}

      <div className={bodyClasses} style={bodyStyle}>
        {children}
      </div>

      {footer && (
        <div className={clsx('prorank-card-footer', footerClassName)}>
          {footer}
        </div>
      )}
    </div>
  );
};

Card.displayName = 'Card';

export const CardBody = ({ children, className = '', style = {} }) => (
  <div className={clsx('prorank-card-body', className)} style={style}>
    {children}
  </div>
);

CardBody.displayName = 'CardBody';

export const CardHeader = ({ children, className = '', style = {} }) => (
  <div className={clsx('prorank-card-header', className)} style={style}>
    {children}
  </div>
);

CardHeader.displayName = 'CardHeader';

export default Card;