import Image from 'next/image';

import styles from './Cover.module.css';

interface CoverProps {
  cover: {
    readonly src: string;
    readonly alt: string;
    readonly caption: string;
    readonly showInHeader: boolean;
  };
}

export default function Cover({ cover }: CoverProps) {
  return (
    <figure className={styles.cover}>
      <Image
        src={cover.src}
        alt={cover.alt || 'Standard Alt'}
        width={0}
        height={0}
        sizes={'100vw'}
        className={styles.image}
      />
      <figcaption className={styles.caption}>
        <div className={styles.captionwrapper}>
          {cover.caption ? (
            <span className={styles.captiontext}>{cover.caption}</span>
          ) : (
            <span className={styles.covermeta}>{cover.src}</span>
          )}
        </div>
      </figcaption>
    </figure>
  );
}
