import { useState } from 'react';
import { FilesList } from "./FilesList";
import { FileContent } from "./FileContent";
import { fromBase64, toBase64 } from "../util/codecs.ts";

export function Obi() {
  const [filePath, setFilePath] = useState('');

  const handleFileClick = (value) => {
    console.log(`Encoded string: [${toBase64(value)}]`);
    console.log(`Decoded string: [${fromBase64(toBase64(value))}]`);
    setFilePath(toBase64(value));
  };

  return (
    <div className="grid text-black grid-cols-1 md:grid-cols-2 h-screen">
      <div className="bg-gray-100 p-4 overflow-y-auto">
        <FilesList handleFileClick={handleFileClick} />
      </div>
      <div className="bg-white p-4 overflow-y-auto">
        <FileContent filePath={filePath} />
      </div>
    </div>
  );
}
