type PeopleMemberCardProps = {
  customClass?: string | null;
  portrait: string;
  name: string;
  title: string;
  positions: string[];
};

export default function PeopleMemberCard(
  {
    portrait = "images/img-portrait.png",
    name = "Name",
    title = "Title",
    positions = [],
  }: PeopleMemberCardProps
) {
  return (
    <div className="peopleMemberCard">
      <figure className="peopleMemberCard-portrait">
        <img
          className="object-scale-down object-center"
          src={portrait}
          alt=""
        />
      </figure>
      <div className="peopleMemberCard-information">
        <h3 className="peopleMemberCard-name">{name}</h3>
        <p className="peopleMemberCard-title">
          {title}
        </p>
        <ul className="peopleMemberCard-career">
          {positions.map((position, index) => (
            <li key={index} className="peopleMemberCard-careerItem">
              {position}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}