// FileListComponent.jsx
import React from "react";

const FileListComponent = ({ files, onFileClick }) => {
  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>
      {files.map((file, index) => (
        // Once clicked, it calls onFileClick , it has file.diff and file.original_content and file.new_content , use the diff to show the changes nicely
        <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>
      ))}
    </div>
  );
};

export default FileListComponent;