// Get the file input and content display elements
const fileInput = document.getElementById('mdFile');
const fileContentDisplay = document.getElementById('fileContent');

// Listen for file input changes (file upload)
fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0]; // Get the first file

  // Ensure the file is a markdown file
  if (file && file.type === "") {
    // Create a FileReader to read the file content
    const reader = new FileReader();

    // Define what happens when the file is read
    reader.onload = function(e) {
      const fileContent = e.target.result; // File content as text
      displayMarkdown(fileContent); // Call function to display the content
    };

    // Read the file as text
    reader.readAsText(file);
  } else {
    alert('Please upload a valid markdown (.md) file');
  }
});

// Function to display markdown content in the page
function displayMarkdown(content) {
  // Display the raw markdown text (you could parse this for richer rendering)
  fileContentDisplay.textContent = content;

  // Optionally: If you want to render Markdown to HTML using a library like marked.js:
  // const htmlContent = marked(content);
  // fileContentDisplay.innerHTML = htmlContent;
}