import React from "react";

import { Image } from "./Image";

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

interface TeamMemberCardProps {
  name: string;
  role: string;
  image?: string; // path to image of person, relative to public directory
  children: React.ReactNode;
}

export function TeamMemberCard(props: TeamMemberCardProps) {
  return (
    <article className={styles.card}>
      <div className={styles.picture}>
        <Image
          className={styles.image}
          src={props.image ?? "/images/team-member-placeholder.svg"}
          alt={`Picture of ${props.name}`}
        />
      </div>
      <h1 className={styles.name}>{props.name}</h1>
      <h2 className={styles.role}>{props.role}</h2>
      <div className={styles.description}>{props.children}</div>
    </article>
  );
}