import React, { useState, useEffect } from 'react';
import { marked } from 'marked' 

export function FileContent({ filePath }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch("http://localhost:8912/api/v1/files/" + filePath); // Replace with your API endpoint
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [filePath]); // Empty dependency array ensures this effect runs only once on mount

  if (loading) return <p>Loading data...</p>;
  // if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <div dangerouslySetInnerHTML={{__html: !!data?.data && marked.parse(data.data)}}></div>
    </div>
  );
}
