text: import React from "react";
  
  import { Redirect, useParams } from "react-router-dom";
  import { useQuery } from "@apollo/client";
  
  import ParksList from "../components/ParksList";
  import ThingsToDoList from "../components/ThingsToDoList";
  import CampgroundList from "../components/CampgroundList";
  // import SkillForm from '../components/SkillForm';
  
  import { QUERY_SINGLE_PROFILE, QUERY_ME } from "../utils/queries";
  
  import Auth from "../utils/auth";
  
  const Profile = () => {
    const { profileId } = useParams();
  
    // If there is no `profileId` in the URL as a parameter, execute the `QUERY_ME` query instead for the logged in user's information
    const { loading, data } = useQuery(
      profileId ? QUERY_SINGLE_PROFILE : QUERY_ME,
      {
        variables: { profileId: profileId },
      }
    );
    // Check if data is returning from the `QUERY_ME` query, then the `QUERY_SINGLE_PROFILE` query
    const profile = data?.me || data?.profile || {};
    // Use React Router's `<Redirect />` component to redirect to personal profile page if username is yours
    if (Auth.loggedIn() && Auth.getProfile().data._id === profileId) {
      return <Redirect to="/me" />;
    }
    if (loading) {
      return <div>Loading...</div>;
    }
    if (!profile?.name) {
      return (
        <h4>
          You need to be logged in to see your profile page. Use the navigation
          links above to sign up or log in!
        </h4>
      );
    }
    return (
      <div
        style={{
  
          backgroundImage: `url(/public/img/camping.jpg)`,
          height: "80vh",
          backgroundSize: "100% 100%",
          backgroundRepeat: "no-repeat",
        }}
      >
        <div>
          <h2 className="card-header">
            {profileId ? `${profile.name}'s` : "You Are"} Heading to Basecamp...
          </h2>
  
          {profile.parks?.length > 0 && (
            <ParksList
              profileId={profile._id}
              parks={profile.parks}
              isLoggedInUser={!profileId && true}
            />
          )}
          {profile.thingsToDos?.length > 0 && (
            <ThingsToDoList
              profileId={profile._id}
              thingsToDos={profile.thingsToDos}
              isLoggedInUser={!profileId && true}
            />
          )}
          {profile.campgrounds?.length > 0 && (
            <CampgroundList
              profileId={profile._id}
              campgrounds={profile.campgrounds}
              isLoggedInUser={!profileId && true}
            />
          )}
  
          {/* <div className="my-4 p-4" style={{ border: '1px dotted #1a1a1a' }}>
          <SkillForm profileId={profile._id} />
        </div> */}
        </div>
      </div>
    );
  };
  export default Profile;
  