import React from "react";
import { Link } from "react-router-dom";
import userContext from "../context/userContext";
import BasicLayout from "../layouts/BasicLayout";
import ImageCard from "../components/ImageCard";
import LogoutCard from "../components/LogoutCard";

// images
import locationImage from "../../public/images/location.webp";
import purchasedImage from "../../public/images/purchased.webp";
import { Box, Typography } from "@mui/material";

const CustomerPage = () => {
  const { user } = React.useContext(userContext);
  return (
    <BasicLayout>
      <Typography variant="h4">Hello, customer {user.username}</Typography>
      <hr />
      <Box style={{ display: "flex", flexWrap: "wrap" }}>
        <Link to="/customer/market">
          <ImageCard
            title="Nearby Market"
            description="Find your neaest market"
            image={locationImage}
          />
        </Link>
        <Link to="/customer/purchased">
          <ImageCard
            title="Purchased"
            description="See what you have purchased"
            image={purchasedImage}
          />
        </Link>
        <LogoutCard />
      </Box>
    </BasicLayout>
  );
};

export default CustomerPage;