// FileListComponent.jsx
import React from "react";
import ReactMarkdown from 'react-markdown';

const FileListComponent = ({ code_changes, onFileClick }) => {
  const filesArray = code_changes ? Object.keys(code_changes).map(filepath => ({
    filepath,
    ...code_changes[filepath]
  })) : [];

  return (
    <div className="mt-4 border border-gray-300 dark:border-gray-600 rounded-lg p-2 space-y-2">
      <div className="font-semibold text-sm text-gray-700 dark:text-gray-300">Files:</div>
      {filesArray.map((file, index) => (
        <div
          key={index}
          className="cursor-pointer bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 p-3 rounded-md shadow-sm transition-colors duration-200"
          onClick={() => onFileClick(file)}
        >
          <div className="flex items-center space-x-2">
            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-indigo-500" viewBox="0 0 20 20" fill="currentColor">
              <path fillRule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 2h2v2H6V6zm3 0h2v2H9V6zm3 0h2v2h-2V6z" clipRule="evenodd" />
            </svg>
            <span className="text-sm font-medium text-gray-900 dark:text-gray-100">{file.filepath}</span>
          </div>
          <div className="mt-2 text-xs text-gray-700 dark:text-gray-300">
            <ReactMarkdown>{file.reasoning}</ReactMarkdown>
          </div>
        </div>
      ))}
    </div>
  );
};

export default FileListComponent;