import React, { useState } from "react";
import "./home.css";
import { PayPal, Purchase, ShowCase, Home } from ".";
import { AllProducts } from "../products";
import { Orders } from "../orders";

// component
const Details = () => {
  const [cart, setCart] = useState([]);
  const [orderID, setOrderID] = useState(null);

  return (
    <>
      <ShowCase />
      {/* you can try 600011 in orderID */}
      <Orders orderID={orderID} setOrderID={setOrderID} />
      <AllProducts setCart={setCart} />
      <Purchase />
      <PayPal cart={cart} />
    </>
  );
};

const Landing = () => {
  const [showDetails, setShowDetails] = useState(false);

  return (
    <>
      {showDetails ? <Details /> : <Home goNext={() => setShowDetails(true)} />}
    </>
  );
};

export default Landing;
