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

const ImageComponent = ({
  src,
  alt,
  title = '',
  width,
  height,
  loading = 'lazy',
  responsive = true,
  className = '',
  style = {},
  variant = 'primary',
  ...rest
}: ImageProps) => {
  const variantClass = styles[`hscl-image-${variant}`]; // !todo: not used atm but keeping for when we need to add variant system.
  const defaultClasses = cx(styles.image, variantClass, {
    [styles.responsive]: responsive,
  });
  const combinedClasses = cx(defaultClasses, className);

  return (
    <img
      src={src}
      alt={alt}
      title={title}
      width={width}
      height={height}
      loading={loading !== 'disabled' ? loading : 'eager'}
      className={combinedClasses}
      style={style}
      {...rest}
    />
  );
};

type ImageComponentType = typeof ImageComponent & {
  ContentFields: typeof ContentFields;
};

const Image = ImageComponent as ImageComponentType;
Image.ContentFields = ContentFields;

export default Image;
