import React from "react";
import AppContext from "../../particles/contexts/app-context";
import Header from "../../organisms/header";
import Footer from "../../organisms/footer";
import background from "../../../public/images/news/background.jpg";
import Image from "next/image";
import Blog from "../../molecules/blog";
import AppTemplate from "../../templates/app";
import { useTranslation } from "next-i18next";
import Head from "next/head";

const Article = ({ appData, article }: any) => {
  const { t } = useTranslation("common");

  return (
    <AppContext.Provider value={appData}>
      <AppTemplate header={<Header variant="dark" />} footer={<Footer />}>
        <Head>
          <title>BASS</title>
        </Head>

        <div className="relative h-[350px] mb-8">
          <Image
            src={background}
            alt=""
            placeholder="blur"
            sizes="100vw"
            className="object-cover -z-[1]"
            fill
          />

          <div className="container">
            <h1 className="text-5xl text-white absolute bottom-22 uppercase">{t("Newsroom")}</h1>
          </div>
        </div>

        <div className="container mb-8">
          <Blog
            isWithoutCard
            id={article.id}
            name={article.name}
            des={article.description}
            img={article.img}
            time={article.date_time}
          />
        </div>
      </AppTemplate>
    </AppContext.Provider>
  );
};

export default Article;
