import { h, Component } from 'preact'

export default function FolderListView (props) {
  const folders = props.folders.map( (folder, i) => (
    <div key={i} onClick={() => props.openFolder(folder)}>
      <a class='name'>{folder.name}</a>
    </div>
  ))
  
  return (
    <div class='window'>
      <div class='heading'>
        <b>browser</b>
        <div class='buttons'>
          <button onClick={props.initNewFolder}>+ folder</button>
        </div>
      </div>
      <div class='folders list'>
        {folders}
      </div>
    </div>
  )
}