import React from "react";
import styles from "./TeamMember.module.css";
import { Image } from "./Image";

interface TeamMemberProps {
  name: string;
  role: string;
  image?: string;
}

export const TeamMember: React.FC<TeamMemberProps> = ({
  name,
  role,
  image,
}) => {
  return (
    <div className={styles.container}>
      <Image
        className={styles.img}
        src={image ?? "/images/team-member-placeholder.svg"}
        alt={`Picture of ${name}`}
      />
      <div className={styles.caption}>
        <div className={styles.name}>{name}</div>
        <div className={styles.role}>{role}</div>
      </div>
    </div>
  );
};