import * as React from "react"
import cls from "classnames"
import t from "@/constants/wording"
import { CustomLink, Container, Icon } from "@/components"
import * as styles from "./index.module.scss"

interface IProps {
  prev?: CompanyNewsDetail
  next?: CompanyNewsDetail
}

const Pagination: React.FC<IProps> = ({ prev, next }) => (
  <Container>
    <div className="columns">
      <div className={cls("column is-8 px-4", styles.pagination)}>
        {prev ? (
          <CustomLink
            linkTo={`/about-us/company-news-detail/${
              prev.customUrl ?? prev.id
            }`}
          >
            <div className={styles.icon}>
              <Icon name="chevron-right" />
            </div>
            <div>
              <label>{t("prev detail")}</label>
              <div>
                <span>{prev.title}</span>
              </div>
            </div>
          </CustomLink>
        ) : (
          <div></div>
        )}
        {next && (
          <CustomLink
            linkTo={`/about-us/company-news-detail/${
              next.customUrl ?? next.id
            }`}
          >
            <div>
              <label>{t("next detail")}</label>
              <div>
                <span>{next.title}</span>
              </div>
            </div>
            <div className={styles.icon}>
              <Icon name="chevron-right" />
            </div>
          </CustomLink>
        )}
      </div>
    </div>
  </Container>
)

export default Pagination