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
  }
} & PracticeType

const PracticeCard: React.FC<IProps> = props => {
  const {
    id,
    customUrl,
    title,
    description,
    tags,
    keywords: words,
    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={`/best-practice-detail/${customUrl ?? id}`}
        className={cls(styles.linkArea, linkArea)}
      >
        <h4 className="pt-2 pb-4">{title}</h4>
        <p className={styles.description}>{description}</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 PracticeCard