import {
  peopleModal // 插入詳細內容Modal(Promise)，包含開啟及關閉功能
} from '/data/www/aia-official-en-main/web/src/js/components/modal.js'


type PeopleExecutiveCardProps = {
  customClass?: string | null;
  portrait: string;
  name: string;
  title: string;
  text?: string | null;
  positions: string[];
  readMoreButton?: boolean; // 是否顯示「Read more」按鈕
};

export default function PeopleExecutiveCard({
  customClass = "",
  portrait = "",
  name = "",
  title = "",
  text = "",
  positions = [
  ],
  readMoreButton = false,
}: PeopleExecutiveCardProps) {

  return (
    <div className={`peopleExecutiveCard ${customClass}`}>
      <figure className="peopleExecutiveCard-portrait">
        <div className="peopleExecutiveCard-mask">
          <img
            className="object-scale-down object-center"
            src={portrait}
            alt=""
          />
        </div>
      </figure>
      <div className={`peopleExecutiveCard-information  ${route().current('people') ? 'peopleExecutiveCard-information--person' : ''}`}>
        <h3 className="peopleExecutiveCard-name">{name}</h3>
        <p className="peopleExecutiveCard-title">{title}</p>
        {!readMoreButton && text && (
          <blockquote className="peopleExecutiveCard-quote">
            {text}
          </blockquote>
        )}
        <dl className="peopleExecutiveCard-position">
          <dt>Current Positions</dt>
          <dd>
            <ul className="peopleExecutiveCard-positionList">
              {positions.map((position, index) => (
                <li key={index}>{position}</li>
              ))}
            </ul>
          </dd>
        </dl>
        {readMoreButton && (
          <button
            type="button"
            className="button button--text"
            onClick={() => {
              peopleModal({
                portrait,
                name,
                title,
                text: text || "",
              });
            }}
          >
            <span className="button-text">Read more</span>
            <i className="icon-arrowRight"></i>
          </button>
        )}

      </div>
    </div >
  );
}