import cx from "classnames";
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 MediaQuery from "react-responsive";
import MobileHeader from "../components/home/mobile/mobileHeader/MobileHeader";
import MobileFooter from "../components/home/mobile/mobileFooter/MobileFooter";
import { baseUrl } from "../constants/urls";
import * as commonAPI from "./api/common";
import SEOHead from "../components/SEOHead";
import { seoDataMap } from "../mockData/seoData";
const seoData = seoDataMap['reportInfringement'];

const ReportInfringement: FC<any> = () => {
  const [category, setCategory] = useState([]);
  const [categoryTree, setCategoryTree] = useState([]);
  const [stateArray, setStateArray] = useState([]);
  useEffect(() => {
    CategoryAPI.fetchCategory().then((res) => {
      setCategory(res);
    });
    CategoryAPI.fetchCategoryTree().then((res) => {
      setCategoryTree(res.categories);
    });
    commonAPI.getRequest(`${baseUrl}/api/indian-states`).then((res) => {
      setStateArray(res?.data)
    })
  }, []);
  return (
    <>
      <SEOHead {...seoData} />

      <MediaQuery maxWidth={768}>
        <MobileHeader stateArray={stateArray} />
      </MediaQuery>
      <MediaQuery minWidth={769}>
        <InternalPageHeader catagories={category} categoryTree={categoryTree} stateArray={stateArray} />
      </MediaQuery>
      <div className={cx("container", styles.mobileView)}>
        <h2 className={cx(styles.aboutUsTitle, "py-2")} >Report Infringement</h2>
        <h3 className="py-2 decoration-dotted" style={{ textDecorationLine: "underline" }}>COPYRIGHT INFRINGEMENTS</h3>
        <p className="px-2">
          We respect the intellectual property rights of others. If you believe
          that any material available on or through the Site infringes upon any
          copyright you own or control, please immediately notify us using the
          contact information provided below (a “Notification”). A copy of your
          Notification will be sent to the person who posted or stored the
          material addressed in the Notification. Please be advised that
          pursuant to applicable law you may be held liable for damages if you
          make material misrepresentations in a Notification. Thus, if you are
          not sure that material located on or linked to by the Site infringes
          your copyright, you should consider first contacting an attorney.
        </p>
      </div>
      <Footer stateArray={stateArray} />
      <MediaQuery maxWidth={768}>
        <MobileFooter stateArray={stateArray} />
      </MediaQuery>
    </>
  );
};
export default ReportInfringement;