<div id="insta-feed"></div>

<script>
  const postsData = [
    {
      id: 1,
      username: "TheEdit21.com",
      profilePic: "https://drive.google.com/file/d/1vQhOfE1bSPEFS4qR0UoUtLBw-uGqw4zN/view?usp=share_link50", // Replace with actual profile image URL
      media: "https://drive.google.com/file/d/13xpISwT397DubdWOt8bmChwJ7JlVpfw-/view?usp=share_link600x400", // Replace with actual image/video URL
      caption: "Your New Social Media Marketing Solution is Here!✨",
      likes: 1502,
      comments: 221,
    },
    {
      id: 2,
      username: "fashionista",
      profilePic: "https://via.placeholder.com/50",
      media: "https://via.placeholder.com/600x500",
      caption: "New outfit of the day! 👗💃",
      likes: 320,
      comments: 58,
    },
    {
      id: 3,
      username: "foodlover",
      profilePic: "https://via.placeholder.com/50",
      media: "https://via.placeholder.com/600x350",
      caption: "This dessert was amazing! 🍰😍",
      likes: 210,
      comments: 33,
    },
  ];

  function renderFeed() {
    const feedContainer = document.getElementById("insta-feed");
    feedContainer.innerHTML = ""; // Clear previous posts

    postsData.forEach(post => {
      const mediaElement = post.media.endsWith(".mp4")
        ? `<video controls style='width: 100%; border-radius: 8px; margin-top: 10px;'>
             <source src='${post.media}' type='video/mp4'>
             Your browser does not support the video tag.
           </video>`
        : `<img src='${post.media}' style='width: 100%; border-radius: 8px; margin-top: 10px;' />`;

      const postElement = `
        <div style="border: 1px solid #ddd; padding: 15px; margin-bottom: 10px; border-radius: 10px;">
          <div style="display: flex; align-items: center; gap: 10px;">
            <img src="${post.profilePic}" width="40" height="40" style="border-radius: 50%;" />
            <strong>@${post.username}</strong>
          </div>
          ${mediaElement}
          <p>${post.caption}</p>
          <p>❤️ ${post.likes} Likes | 💬 ${post.comments} Comments</p>
        </div>
      `;
      feedContainer.innerHTML += postElement;
    });
  }

  renderFeed();
</script>