import { marked } from "marked"

interface ProjectProps {
  name: string
  readme: string
  files: string[]
}

export function Project({ name, readme, files }: ProjectProps) {
  return (
    <>
      <p><a href="/">« Back</a></p>
      <div class="content-wrapper">
        <div class="main-content">
          <p dangerouslySetInnerHTML={{ __html: marked.parse(readme) }} />
        </div>
        <div class="side-content">
          {files.length > 0 && (
            <>
              <h2>Files</h2>
              <ul class="file-list">
                {files.sort().map(file => (
                  <li key={file}>
                    <a href={`/${name}/${file}`}>{file}</a>
                    <button
                      type="button"
                      class="delete-button"
                      data-file={file}
                    >×</button>
                  </li>
                ))}
              </ul>
            </>
          )}
          <h2>Upload File</h2>
          <div id="upload-container" class="upload-container">
            <input type="file" id="file-input" class="file-input" />
            <button type="button" id="upload-button" class="upload-button" style="display: none">Upload</button>
            <div id="progress-container" class="progress-container">
              <div id="progress-bar" class="progress-bar"></div>
              <div id="progress-text">0%</div>
            </div>
          </div>
          <div id="drag-overlay" class="drag-overlay">
            <div class="drag-text">DROP FILE HERE</div>
          </div>
        </div>
      </div>
      <script src="/js/project.js"></script>
    </>
  )
}