import React, { useState, FC } from "react";

import ListView from "./ListView";
import GridView from "./GridView";
import MobileView from "./MobileView";
import { useMediaQuery } from "react-responsive";

import styles from "./productCard.module.scss";
import { Spin } from "antd";

const ProductCard: FC<any> = ({
  product,
  isGridView,
  selectRequestQuote,
  handleRouteChangeStart,
  handleRouteChangeEnd,
  setIsLoading,
  type
}) => {
  const [itemCount, setitemCount] = useState(0);
 
  const isMobileScreen = () => useMediaQuery({ maxWidth: 1224 });
  if (isMobileScreen()) {
    return (
        
      <MobileView
        product={product}
        itemCount={itemCount}
        selectRequestQuote={selectRequestQuote}
        handleRouteChangeStart={handleRouteChangeStart}
        handleRouteChangeEnd={handleRouteChangeEnd}
        setIsLoading={setIsLoading}
      />
     
    );
  } else {
    return isGridView ? (
      <GridView
        product={product}
        itemCount={itemCount}
        selectRequestQuote={selectRequestQuote}
        handleRouteChangeStart={handleRouteChangeStart}
        handleRouteChangeEnd={handleRouteChangeEnd}
        type={type}
      />
    ) : (
      <ListView
        product={product}
        itemCount={itemCount}
        selectRequestQuote={selectRequestQuote}
        handleRouteChangeStart={handleRouteChangeStart}
        handleRouteChangeEnd={handleRouteChangeEnd}
      />
    );
  }
};

export default ProductCard;