import { useTranslation } from "next-i18next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import Image from "next/image";
import Layout from "../components/layout";

const images = [
  "/images/blog/photo01.jpeg",
  "/images/blog/photo02.jpeg",
  "/images/blog/photo03.jpeg",
  "/images/blog/photo04.jpeg",
  "/images/blog/photo05.jpeg",
  "/images/blog/photo06.jpeg",
  "/images/blog/photo07.jpeg",
  "/images/blog/photo08.jpeg",
  "/images/blog/photo09.jpeg",
  "/images/blog/photo10.jpeg",
  "/images/blog/photo11.jpeg"
];

const Blog = () => {
  const { t: translate } = useTranslation();

  return (
    <Layout title="archive.title" subtitle="archive.subtitle">
      <div className="layout text-center mt-10 space-y-6 text-lg text-zinc-700 whitespace-pre-line">
        <p>{translate("archive.description")}</p>

        <div className="grid grid-cols-2 md:grid-cols-3 gap-6 mt-10">
          {images.map((src, index) => (
            <div key={index} className="relative w-full h-64">
              <Image
                src={src}
                alt={`Blog image ${index + 1}`}
                fill
                className="object-cover rounded-lg"
              />
            </div>
          ))}
        </div>
      </div>
    </Layout>
  );
};

export async function getStaticProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale)),
    },
  };
}

export default Blog;
