import {type FunctionComponent} from 'react'
import {PlusIcon} from 'lucide-react'

const CollectionPage: FunctionComponent = () => {
  return (
    <>
      <div className="artifacts-header">
        <h2>Collectie</h2>

        <button>
          <PlusIcon /> Artifact toevoegen
        </button>
      </div>

      <div className="filters">
        <input type="search" placeholder="Zoek artefacten op naam of era..." />
        <div>
          <label htmlFor="onDisplay">Tentoongesteld:</label>
          <input id="onDisplay" type="checkbox" />
        </div>
      </div>

      <div className="artifacts">{/* Lijst van artefacten hier */}</div>
    </>
  )
}

export default CollectionPage
