import * as React from "react"
import { Container, ListLayout, ListImg } from "@/components"
import t from "@/constants/wording"
import * as styles from "./index.module.scss"

interface IProps {
  recentNews: LatestNew[]
}

const RecentNews: React.FC<IProps> = props => {
  const { recentNews } = props
  return (
    <div className={`common-region-grey ${styles.recentNews}`}>
      <Container>
        <h1 className="common-h1-title">{t("important news")}</h1>
        {recentNews && recentNews.length > 0 && (
          <ListLayout listData={recentNews}>
            {(item: LatestNew) => (
              <div className="common-card-content">
                <ListImg
                  className={styles.imgContent}
                  imgInfo={item.image}
                  scale={[13, 5]}
                />
                <div className={styles.describe}>
                  <h3>{item.title}</h3>
                  <h5>{item.description}</h5>
                </div>
              </div>
            )}
          </ListLayout>
        )}
      </Container>
    </div>
  )
}

export default RecentNews