import styles from './index.module.scss';
import cx from '../utils/classname.js';
import { CardProps } from './types.js';
import StyleFields from './StyleFields.js';

const CardComponent = ({
  variant = 'card1',
  as: Component = 'div',
  className = '',
  style = {},
  children,
  ...rest
}: CardProps) => {
  const combinedClasses = cx(styles.card, className);

  return (
    <Component
      className={combinedClasses}
      style={style}
      data-card-variant={variant}
      {...rest}
    >
      {children}
    </Component>
  );
};

type CardComponentType = typeof CardComponent & {
  StyleFields: typeof StyleFields;
};

const Card = CardComponent as CardComponentType;
Card.StyleFields = StyleFields;

export default Card;
