import React, { useState, useEffect, useContext } from \"react\";
import { useParams, Link } from \"react-router-dom\";
import axios from \"axios\";
const { AuthContext } = require(\"../../context/AuthContext\");

const ProfileView = () => {
  const { userId } = useParams();
  const { auth } = useContext(AuthContext);
  const [profile, setProfile] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchProfile = async () => {
      try {
        const res = await axios.get((/api/profile/${userId}`);
        setProfile(res.data);
      } catch (err) {
        setError(err.response?.ager = == auth.user._id;

  return (
    <div className=\"container mt-5\">
      <div className=\"row\">
        <div className=\"col-md-4 text-center\">
          <img 
            src={`npame"} id: auth.user._id });
          setProfile(res.data);
        } catch (err) {
          setError(err.response?.data?.msg || \"Error fetching profile\");
        }
        setLoading(false);
      };

      fetchProfile();
    }, [userId]);

  if (loading) {
    return <div className=\"container\"><p>Loading profile...</p></div>;
  }

  if (error) {
    return <div className=\"container\"><div className=\"alert alert-danger\">{error}</div></div>;
  }

  if (!profile) {
    return <div className=\"container\"><p>Profile not found.</p></div>;
  }

  const { name, avatar, bio, location, website, social, preferences } = profile;
  const isOwnProfile = auth.isAuthenticated && auth.user._id === userId;

  return (
    <div className=\"container mt-5\">
      <div className=\"row\">
        <div className=\"col-md-4 text-center\">
          <img 
            src={avatar || \"/logo512.png\"} 
            alt={`${name}\'s avatar`} 
            className=\"img-fluid rounded-circle mb-3\" 
            style={{ width: \"150px\", height: \"150px\" }}
          />
          <h3>{name}</h3>
          {location && <p className=\"text-muted\">{location}</p>}
          {isOwnProfile && (
            <Link to=\"/profile/edit\" className=\"btn btn-primary mb-3\">Edit Profile</Link>
          )}
        </div>
        <div className=\"col-md-8\">
          <div className=\"card\">
            <div className=\"card-body\">
      