import { FC, useEffect, useState } from "react";
import Footer from "../components/home/footer/Footer";
import InternalPageHeader from "../components/internalPageHeader/InternalPageHeader";
import * as CategoryAPI from "./api/category";
import styles from "./fotterPage.module.scss";
import cx from "classnames";
import { Image } from "antd";

import MediaQuery from "react-responsive";
import MobileHeader from "../components/home/mobile/mobileHeader/MobileHeader";
import MobileFooter from "../components/home/mobile/mobileFooter/MobileFooter";
import {
    FilePdfOutlined
  } from "@ant-design/icons";
const Casestudies: FC<any> = () => {
  const [category, setCategory] = useState([]);
  const [categoryTree, setCategoryTree] = useState([]);

  useEffect(() => {
    CategoryAPI.fetchCategory().then((res) => {
      setCategory(res);
    });
    CategoryAPI.fetchCategoryTree().then((res) => {
      setCategoryTree(res.categories);
    });
  }, []);

  return(
    <>
      <MediaQuery maxWidth={768}>
        <MobileHeader />
      </MediaQuery>
      <MediaQuery minWidth={769}>
        <InternalPageHeader
          
          catagories={category}
          categoryTree={categoryTree}
        />
      </MediaQuery>
      <div className="container py-6">
        <div className={cx("cursor-pointor",styles.pdfLinks)} onClick={()=>{window.open('/casestudies/Ainu_BrandManual.pdf')}}>Ainu Brand Manual <FilePdfOutlined /></div>
        <div className={cx("cursor-pointor",styles.pdfLinks)} onClick={()=>{window.open('/casestudies/Mitosis_BrandManual.pdf')}}> Mitosis BrandManual <FilePdfOutlined /></div>
        <div className={cx("cursor-pointor",styles.pdfLinks)} onClick={()=>{window.open('/casestudies/M-S-Real Estate_BrandManual.pdf')}}>M/S-Real Estate BrandManual <FilePdfOutlined /></div>
        <div className={cx("cursor-pointor",styles.pdfLinks)} onClick={()=>{window.open('/casestudies/MediMee.pdf')}}>MediMee <FilePdfOutlined /></div>
        <div className={cx("cursor-pointor",styles.pdfLinks)} onClick={()=>{window.open('/casestudies/Indisapre_BrandManual.pdf')}}>Indisapre BrandManual <FilePdfOutlined /></div>
        <div className={cx("cursor-pointor",styles.pdfLinks)} onClick={()=>{window.open('/casestudies/Fluidmeet_BrandManual.pdf')}}>Fluidmeet BrandManual <FilePdfOutlined /></div>
        <div  className={cx("cursor-pointor",styles.pdfLinks)} onClick={()=>{window.open('/casestudies/Spencer_Health_Solutions.pdf')}}>Spencer Health Solutions <FilePdfOutlined /></div>

      </div>
      <MediaQuery maxWidth={768}>
        <MobileFooter />
      </MediaQuery>
      <MediaQuery minWidth={769}>
        <Footer />
      </MediaQuery>
    </>
  )

}

export default Casestudies;