import React from "react"
import { CustomLink } from "@/components"
import moment from "moment"
import cls from "classnames"
import * as styles from "./blog-items.module.scss"
import { Link } from "gatsby"

type IProps = {
  list: Blog[]
}

const BlogItems: React.FC<IProps> = ({ list }) => {
  return (
    <section className={styles.container}>
      {list.map(blog => (
        <div className={styles.item} key={blog.customUrl}>
          {blog.category?.name && <Link to={`/blog/categories/${blog.category.name}`} className={styles.category}>{blog.category.name}</Link>}
          <h4 className={styles.h4}>
            <CustomLink
              linkTo={`/blog/${blog.customUrl ?? blog.id}`}
              className={styles.customLink}
            >
              {blog.title}
            </CustomLink>
          </h4>
          <p className={styles.p1}>{blog.summary}</p>
          <footer className={cls(styles.footerBar)}>
            <div className={styles.info}>
              <div className={cls(styles.author)}>{blog.author}</div>
              <div className={cls(styles.date)}>
                {moment(blog.date).format("YYYY-MM-DD")}
              </div>
            </div>
            <div className={cls(styles.tags)}>
              {blog.tags.map(tag => (
                <Link
                  key={tag}
                  to={`/blog/?tag=${tag}`}
                  className={styles.tag}
                >
                  {tag}
                </Link>
              ))}
            </div>
          </footer>
        </div>
      ))}
    </section>
  )
}

export default BlogItems