import { Box } from "@mui/system";
import { Grid } from "../components/grid/Grid";
import { SPACING } from "../data/spacing";
import { AuctionsBids } from "../features/auction/components/auction-bids/AuctionBids";
import { AuctionsView } from "../features/auction/components/auctions-view/AuctionsView";
import useUserProfile from "../features/authentication/hooks/useUserProfile";
import { getRoleFromUrl } from "../utils/getRoleFromUrl";

const Auction = () => {
  const [roles] = useUserProfile();
  return (
    <Box display={"flex"} justifyContent="center">
      <Grid
        container
        direction="column"
        justifyContent="center"
        xs={12}
        sm={12}
        md={10}
        lg={10}
      >
        <Grid container justifyContent="space-between" gap={SPACING.SMALL}>
          <AuctionsView />
        </Grid>
        {getRoleFromUrl() === "KillHouse" && roles.includes("KillHouse") && (
          <Grid justifyContent="center" my={SPACING.MEDIUM}>
            <AuctionsBids />
          </Grid>
        )}
      </Grid>
    </Box>
  );
};

export default Auction;
