import React, { useState } from "react";
import PropTypes from "prop-types";
import { MarketPlaceContainer } from "./MarketPlace.styled";
import Header from "./Header/Header";
import Offers from "./Offers/Offers";

const MarketPlace = (props) => {
  const [isGrid, setIsGrid] = useState(false);
  const offers = props.offers;

  return (
    <MarketPlaceContainer>
      <Header
        isGrid={isGrid}
        setIsGrid={setIsGrid}
        myOffers={props.myOffers}
        sorting={props.offers.sorting}
        skeleton={props.skeleton}
        animationStage={props.animationStage}
      />
      <Offers
        isGrid={isGrid}
        myOffers={props.myOffers}
        animationStage={props.animationStage}
        skeleton={props.skeleton}
        offers={offers}
        toggleFilters={props.toggleFilters}
      />
    </MarketPlaceContainer>
  );
};

MarketPlace.propTypes = {
  children: PropTypes.node,
  myOffers: PropTypes.bool,
  animationStage: PropTypes.number,
  skeleton: PropTypes.bool,
  offers: PropTypes.any,
  toggleFilters: PropTypes.func
};

export default MarketPlace;
