ImageEvent.tsx

import React from 'react';
import Event from './Event';
import { joinClassNames } from './classNames';


export function ImageAtom({ src, alt }:{src: string, alt: string}) {
  return <img className='img-timeline' src={src} alt={alt}/>;
}


function ImageCredit({ text}:{text: string}) {
  return (
    <div className='img-credit'>
      {text}
    </div>
  );
}

function ImageText({ text, }:{text: string}) {
  return (
    <div className='img-text'>
      {text}
    </div>
  );
}

interface ImageEventProps{
    date : string,
    src: string,
    alt: string,
    credit: string,
    text: string,
    marker?: React.ReactNode,
    children?: React.ReactNode, 
    id: string,
    card?: Function,
}

/**
 * Renders a responsive image as an event.
 */
export const ImageEvent = ({date,src,alt,credit,text,children,id,card,}: ImageEventProps) => {
  
  return (
    <Event
      className={joinClassNames({ classNames: ['image-event'] })}
      date={date}
      card={card} 
      id={id}
      text={text} layout='default'   >
      {text && <ImageText text={text} />}
      <ImageAtom src={src} alt={alt} />
      {credit && <ImageCredit text={credit} />}
      {children}
    </Event>
  );
}



export default ImageEvent;