// === imports ===
type EventCardProps = {
  darkBackground?: boolean;// 是否使用深色背景預設應該為 false
  eventCardTitle?: string; // 活動標題
  eventCardType?: string; // 活動類型
  eventCardDate?: string; // 活動日期
  eventCardLocation?: string; // 活動地點
  eventCardImage?: string; // 活動圖片URL
  eventCardLink?: string; // 活動連結
  eventCardLinkText?: string; // 活動連結文字
  className?: string; // 額外的CSS類別
};
export default function EventCard(
  { // 預設參數
    darkBackground = false,
    eventCardTitle = "Title AI EXPO Taiwan 2025",
    eventCardType = "Type",
    eventCardDate = "26 Mar 2025",
    eventCardLocation = "",
    eventCardImage = "images/img-event.png",
    eventCardLink = "javascript:;",
    eventCardLinkText = "for more information",
    className = "",
  }: EventCardProps
) {
  return (
    <div className={`eventCard ${darkBackground ? 'eventCard--dark' : ''}`}>
      <a href={eventCardLink}
        title={
          eventCardLinkText
        }>
        <figure className="eventCard-visual">
          <img
            className="object-scale-down object-center"
            src={eventCardImage}
            alt="活動圖片"
          />
        </figure>
        <div className="eventCard-information">
          <hgroup className="eventCard-heading">
            <p className="eventCard-type">{eventCardType}</p>
            <h3 className="eventCard-title">{eventCardTitle}</h3>
          </hgroup>
          <ul>
            <li className="eventCard-date">
              <i className="icon-clander eventCard-dateIcon"></i>
              {eventCardDate}
            </li>
            <li className="eventCard-location">
              <i className="icon-location eventCard-locationIcon"></i>
              {eventCardLocation}
            </li>
          </ul>
        </div>
      </a>
    </div>
  );
}