"use client";
import React, { useEffect, useState } from "react";
import AboutMain from "@/components/about/AboutMain";
import Wrapper from "@/layout/DefaultWrapper";
import thumbOne from "../../../public/assets/img/about/dowload-img.png";
import Image from "next/image";

const Catalog = () => {
  const downloadCatalog = (pdfUrl: string) => {
    const link = document.createElement("a");
    link.href = pdfUrl;
    link.target = "_blank";
    link.download = "katalog.pdf"; // specify the filename
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  return (
    <>
      <Wrapper>
        <main>
          <div className="about-area pt-50 pb-50">
            <div className="container">
              <div className="row">
              <div className="col-xl-2 col-lg-2"></div>
                <div className="col-xl-8 col-lg-8">
                  <div
                    onClick={() => {
                      downloadCatalog(
                        "https://fabenapi.vevasoftprojects.com/ass-catalog.pdf"
                      );
                    }}
                    className="catalog-img image-container"
                  >
                    <div className="overlay"></div>
                    <Image
                      src={thumbOne}
                      style={{ width: "100%", height: "100%" }}
                      alt="catalog-data"
                    />
                  </div>
                </div>
                <div className="col-xl-2 col-lg-2"></div>
              </div>
            </div>
          </div>
        </main>
      </Wrapper>
    </>
  );
};

export default Catalog;