import React, { useState, useEffect } from "react"
import cls from "classnames"
import * as styles from "./index.module.scss"
import { Container } from "@/components"
import t from "@/constants/wording"
import NewsList from "@/components/about-us/news-list"

const NewsTab: React.FC<{ tab: string }> = ({ tab }) => {
  const menuList = [
    {
      id: "companyNews",
      title: t("company news"),
    },
    {
      id: "mediaReports",
      title: t("Media Reports"),
    },
  ]

  const [tabName, setTabName] = useState("")

  useEffect(() => {
    setTabName(tab)
  }, [])

  const menuClick = (id: string) => {
    setTabName(id)
  }

  return (
    <>
      <Container isSmall={true}>
        <div className={styles.newsTab}>
          {menuList.map(list => (
            <div
              onClick={() => menuClick(list.id)}
              className={cls(
                styles.tab,
                tabName === list.id ? styles.active : ""
              )}
              key={list.id}
            >
              <span>{list.title}</span>
            </div>
          ))}
        </div>
      </Container>
      {tabName && tabName === "companyNews" && (
        <NewsList isNews key="companyNews" />
      )}
      {tabName && tabName === "mediaReports" && <NewsList key="mediaReports" />}
    </>
  )
}

export default NewsTab