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

type IProps = {
  select: (tag: string) => void
  withDivideLine?: boolean
  parentStyles?: {
    contentContainer: string
    tagArea: string
    linkArea: string
    tagClass: string
  }
} & Blog

const BlogCard: React.FC<IProps> = props => {
  const {
    id,
    customUrl,
    title,
    summary,
    tags,
    select = () => undefined,
    withDivideLine = true,
    parentStyles = {
      contentContainer: "",
      tagArea: "",
      tagClass: "",
      linkArea: "",
    },
  } = props
  //const keywords = Array.from(new Set(words))
  const { contentContainer, tagArea, tagClass, linkArea } = parentStyles
  return (
    <div
      className={cls(
        styles.contentContainer,
        "is-flex is-flex-direction-column",
        contentContainer
      )}
    >
      <div className={cls(styles.tagArea, tagArea)}>
        {tags.map(tag => {
          return (
            <a
              className={cls(styles.tag, tagClass)}
              onClick={() => select(tag)}
              key={tag}
            >
              {tag}
            </a>
          )
        })}
      </div>
      <CustomLink
        linkTo={`/blog/${customUrl ?? id}`}
        className={cls(styles.linkArea, linkArea)}
      >
        <h4 className="pt-2 pb-4">{title}</h4>
        <p className={styles.description}>{summary}</p>
        {/*<div className={styles.keywordsArea}>*/}
        {/*  {keywords &&*/}
        {/*    keywords.map(keyword => {*/}
        {/*      return (*/}
        {/*        <span className={cls(styles.keyword, "mr-2")} key={keyword}>*/}
        {/*          <p className="px-2">{keyword}</p>*/}
        {/*        </span>*/}
        {/*      )*/}
        {/*    })}*/}
        {/*</div>*/}
        {withDivideLine && <hr />}
      </CustomLink>
    </div>
  )
}

export default BlogCard