import React from "react";

import { Image } from "./Image";

import styles from "./MiniTechTalkCard.module.css";

interface MiniTechTalkProps {
  title: string;
  presentors: string[];
  poster: string;
}

export function MiniTechTalkCard({
  title,
  presentors,
  poster,
}: MiniTechTalkProps) {
  return (
    <article className={styles.card}>
      <aside>
        <Image
          alt={`Thumbnail of tech talk by ${presentors.join(", ")}: ${title}`}
          src={poster}
        />
      </aside>
      <div className={styles.content}>
        <h1>{title}</h1>
        <p>{presentors.join(", ")}</p>
      </div>
    </article>
  );
}