import React from "react"
import InformationCard, { InformationCardProps } from "./information-card"
import cls from "classnames"

import * as styles from "./index.module.scss"

type ILatestInfo = {
  id: string
} & InformationCardProps
const HomeLatestInfo = (props: {
  nodes: ILatestInfo[]
}): React.ReactElement => {
  const { nodes } = props
  return (
    <div className={styles.cardContainer}>
      <div className="container px-4">
        <div className={styles.cardArea}>
          <div className="columns is-tablet is-variable is-8">
            {nodes.map(item => (
              <div
                className={cls(
                  styles.card,
                  styles.cardGap,
                  "column is-one-third-tablet"
                )}
                key={item.id}
              >
                <InformationCard {...item} />
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

export default HomeLatestInfo