import Image from 'next/image';

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

interface FigureProps {
  src: string;
  alt: string;
  caption?: string;
  credit?: string;
}

export default function Figure({ src, alt, caption, credit }: FigureProps) {
  const hasCaption = !!caption;
  const hasCredit = !!credit;
  const showFigcaption = hasCaption || hasCredit;

  return (
    <figure className={styles.figure}>
      <Image
        src={src}
        alt={alt}
        width={800}
        height={600}
        className={styles.image}
      />
      {showFigcaption && (
        <figcaption className={styles.caption}>
          {hasCaption && <span className={styles.text}>{caption}</span>}
          {hasCredit && <cite className={styles.credit}>[{credit}]</cite>}
        </figcaption>
      )}
    </figure>
  );
}
