import React from "react";
import ProductModelInfo from "../components/ProductModelInfo";
import ComponentsProductModel from "../components/ComponentsProductModel";
import { useSelector } from "react-redux";
import DownArrow from "../components/DownArrow";

export default function ProductModel() {
  // redux state

  const productSelected = useSelector((state) => state.productSelected);
  return (
    <>
      <div style={{ height: "100vh", background: "#f2f4f6" }}>
        <ProductModelInfo product={productSelected} />
      </div>
      <div
        style={{
          width: "100%",
          background: "",
          display: "fluid",
          alignItems: "left",
        }}
      >
        <ComponentsProductModel product={productSelected} />
        <div style={{ position: "absolute", bottom: "2%", left: "45%" }}>
          <DownArrow />
        </div>
      </div>
    </>
  );
}