import { PeopleModalTrigger } from '@/components/aia/modal-wrapper';


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="w-full aspect-[3/4] object-cover 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 && (
          <PeopleModalTrigger
            type="button"
            className="button button--text"
            modalData={{
              portrait,
              name,
              title,
              text: text || "",
            }}
          >
            <span className="button-text">Read more</span>
            <i className="icon-arrowRight"></i>
          </PeopleModalTrigger>
        )}

      </div>
    </div >
  );
}