import React, { FC } from 'react';

import { INodeComponentProps } from '~/constants/node';
import { ImagePresets } from '~/constants/urls';
import { useNodeImages } from '~/hooks/node/useNodeImages';
import { getURL } from '~/utils/dom';
import { path } from '~/utils/ramda';

import styles from './styles.module.scss';

interface IProps extends INodeComponentProps {}

const NodeAudioImageBlock: FC<IProps> = ({ node }) => {
  const images = useNodeImages(node);

  if (images.length === 0) return null;

  return (
    <div className={styles.wrap}>
      <div
        className={styles.slide}
        style={{ backgroundImage: `url("${getURL(path([0], images), ImagePresets.small_hero)}")` }}
      />
    </div>
  );
};

export { NodeAudioImageBlock };
