import * as React from "react"
import cls from "classnames"
import t from "@/constants/wording"
import { CustomLink } from "@/components"
import * as styles from "./index.module.scss"

interface IProps {
  header?: string
  content?: string
  footer?: string
  link?: string
  isBlankLine?: boolean
  className?: string
}

const DetailCard: React.FC<IProps> = ({
  children,
  header,
  content,
  footer,
  link,
  isBlankLine,
  className,
}) => (
  <div className={cls(styles.authorIntroduction, className)}>
    {header && <h4 className="pb-4">{header}</h4>}
    <div className={cls(styles.content, isBlankLine ? styles.darkColor : "")}>
      {children && children}
      {content && content}
      {isBlankLine && (
        <div>
          <br />
          {t(
            "If you are interested in learning more industry insights, please communicate with us"
          )}
        </div>
      )}
    </div>
    {footer && (
      <div className="has-text-right pt-5">
        <CustomLink linkTo={link ? link : ""} className="button is-primary">
          {footer}
        </CustomLink>
      </div>
    )}
  </div>
)

export default DetailCard