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'

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

}



export default ProductCard