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

const CardComponent = ({
  variant = 'elevated',
  as: Component = 'div',
  borderRadius = 8,
  className = '',
  style = {},
  children,
  ...rest
}: CardProps) => {
  const variantClass = styles[`hscl-card-${variant}`]; // !todo: not used atm but keeping for when we need to add variant system.

  const defaultClasses = cx(styles.card, variantClass);
  const combinedClasses = cx(defaultClasses, className);

  const cssVariables: CSSVariables = {
    '--hscl-card-borderRadius': `${borderRadius}px`,
    ...style,
  };

  return (
    <Component className={combinedClasses} style={cssVariables} {...rest}>
      {children}
    </Component>
  );
};

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

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

export default Card;
