import React from "react";
import { useTranslation } from "next-i18next";
import TitleWithLine from "../../molecules/title-with-line/TitleWithLine";
import Button from "../../atoms/button";
import Blog from "../../molecules/blog";
import { HomeSlide } from "../../molecules/home-slide-switcher/HomeSlideSwitcher";
import Script from "next/script";
import Link from "next/link";

const Newsroom = ({ data, twitter }: any) => {
  const { t } = useTranslation("common");

  return (
    <article id={HomeSlide.Newsroom} className="relative h-full container flex items-center">
      <div>
        <div className="mb-8">
          <TitleWithLine>
            <h1 className="text-color-1 text-4xl lg:text-5xl uppercase">{t("Newsroom")}</h1>
          </TitleWithLine>
        </div>

        <div className="lg:flex justify-between gap-5">
          <div className="lg:w-3/4 h-full">
            <div className=" h-full flex flex-col justify-center">
              <div className="flex flex-wrap mb-8">
                {data.map(({ id, name, desc, img, date_time }: any) => (
                  <div key={id} className="lg:w-1/2">
                    <div className="m-3">
                      <Blog id={id} name={name} des={desc} img={img} time={date_time} />
                    </div>
                  </div>
                ))}
              </div>

              <div className="max-lg:mb-16 max-lg:flex justify-center">
                <Link href="/news">
                  <Button>{t("View All News")}</Button>
                </Link>
              </div>
            </div>
          </div>

          <div className="lg:w-1/4 overflow-auto mt-3">
            <a
              className="twitter-timeline"
              href={`${twitter}?ref_src=twsrc%5Etfw`}
              data-height="438"
            >
              {t("Tweets by BASS")}
            </a>{" "}
            <Script async src="https://platform.twitter.com/widgets.js"></Script>
          </div>
        </div>
      </div>
    </article>
  );
};

export default Newsroom;