import { useEffect, useState } from "react";

export default function FilesPanel() {
  const [files, setFiles] = useState<string[]>([]);

  useEffect(() => {
    fetch("/api/list-files")
      .then((r) => r.json())
      .then((j) => setFiles(j.files))
      .catch(() => setFiles([]));
  }, []);

  return (
    <div className="h-full overflow-auto bg-gray-900 text-gray-200 p-4">
      <h2 className="text-lg font-semibold mb-2">Arquivos</h2>
      <ul className="space-y-1">
        {files.map((f) => (
          <li key={f} className="px-2 py-1 hover:bg-gray-800 rounded cursor-pointer">
            {f}
          </li>
        ))}
      </ul>
    </div>
  );
}