import React from "react"
import * as styles from "./index.module.scss"
import { CustomLink } from "@/components"
import { formatDate } from "@/utils"
import MarkdownToText from "@/components/markdown-to-text"
import { ABOUT_US_NEWS_TYPE_VALUE } from "@/constants/about-us"

const CompanyNewsCard: React.FC<CompanyNewsDetail> = ({
  id,
  title,
  customUrl,
  body,
  author,
  date,
  image,
  type,
}) => {
  return (
    <div className={styles.companyNewsCard}>
      <CustomLink
        linkTo={
          type === ABOUT_US_NEWS_TYPE_VALUE[1]
            ? body
            : `/about-us/company-news-detail/${customUrl ?? id}`
        }
      >
        <div className={styles.left}>
          <h4>{title}</h4>
          <p>{MarkdownToText(body)}</p>
          <div className={styles.author}>
            {author} | {formatDate(date)}
          </div>
        </div>
        <figure className={styles.right}>
          <img src={image.media.url} alt={image.alt} />
        </figure>
      </CustomLink>
    </div>
  )
}

export default CompanyNewsCard