import * as React from "react"
import classNames from "classnames"

import * as styles from "./CourseItem.module.scss"
import OutLink from "@/components/OutLink"
import Icon from "../icon";

export interface IProps extends React.HTMLAttributes<HTMLDivElement> {
  icon?: { url: string; alt?: string } // 课程图标
  name: string // 课程名称
  freeBadge?: boolean // 限时免费标识
  showContactButton?: boolean // 是否显示【联系我们】按钮
  version: CoursesCatalogMatchedVersion // 产品版本
  level: string // 课程难度
  matchedPeople: string[] // 适合人群
  durationTime: string // 预计学习时长
  precondition?: string // 前置条件
  introduction: React.ReactNode // 课程简介
  links?: CoursesCatalogButton[] // 底部按钮配置信息
  handleOpenContact: () => void // 弹出【联系我们】留资窗口
}

function CourseItem(props: IProps) {
  const {
    className,
    icon,
    freeBadge,
    showContactButton,
    name,
    version,
    level,
    matchedPeople,
    durationTime,
    precondition,
    introduction,
    links,
    handleOpenContact,
    ...rest
  } = props
  const versionsRender = version.version // (versions !== undefined && versions.length !== 0) ? versions?.join(", ") : "通用"
  const matchedPeopleRender = matchedPeople?.length !== 0 ? matchedPeople?.join(", ") : "普适"
  const preconditionRender = precondition ?? "无"
  return (
    <div className={classNames(className, styles.container, "common-card-content")} {...rest}>
      <div>
        {(icon || freeBadge) && (
          <div className={styles.header}>
            <div className={styles.header_icon}>
              {icon && <img src={icon.url} alt={icon.alt} />}
            </div>
            <div className={styles.header_free}>
              {freeBadge && <div className={classNames("button is-success is-small", styles.header_free_text)}>限时免费</div>}
            </div>
          </div>
        )}

        <div className={styles.name}>{name}</div>

        <ul className={styles.info}>
          <li className={styles.info_versions}>产品版本: {versionsRender}</li>
          <li className={styles.info_level}>课程难度: {level}</li>
          <li className={styles.info_matchedPeople}>适合人群: {matchedPeopleRender}</li>
          <li className={styles.info_StudyTime}>预计学习时长: {durationTime}</li>
          <li className={styles.info_precondition}>前置条件: {preconditionRender}</li>
        </ul>

        <div className={styles.introduction}>{introduction}</div>
      </div>

      {links && (
        <div className={styles.buttons}>
          {links?.map((value, index) => (
            <OutLink key={index} href={value.link}>{value.text} <Icon name="arrow-right" /></OutLink>
          ))}
          {showContactButton && (
            <OutLink onClick={() => {handleOpenContact();return false}}>联系课程咨询 <Icon name="arrow-right"/></OutLink>
          )}
        </div>
      )}
    </div>
  )
}

export default CourseItem