// src/components/CodeFolderAccess.js
import React from "react";

const CodeFolderAccess = ({ selectedFolder, onSelectFolder }) => {
  const handleFolderChange = async () => {
    // This is a placeholder. In a real application, you would use a browser API
    // or a desktop framework like Electron to access the file system.
    // Example using the File System Access API (requires user gesture)
    try {
      const directoryHandle = await window.showDirectoryPicker();
      const folderPath = directoryHandle.name; // Simplified path, you might get a full path in a real app
      onSelectFolder(folderPath);
    } catch (err) {
      console.error("Failed to select directory:", err);
      // You might want to handle user cancellation here
    }
  };

  return (
    <div className="flex flex-col space-y-4">
      {/* Button to trigger the folder selection dialog */}
      <button
        onClick={handleFolderChange}
        className="w-full p-3 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white font-bold transition-colors"
      >
        Select a Local Code Folder
      </button>

      {/* Display the selected folder path */}
      <div className="p-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-800">
        <p className="text-gray-500 dark:text-gray-400 text-sm">
          Selected Folder:
        </p>
        <p className="truncate font-mono text-gray-900 dark:text-gray-100">
          {selectedFolder || "No folder selected"}
        </p>
      </div>
    </div>
  );
};

export default CodeFolderAccess;