<script>
  export let title;
  /**
   * @type {ArrayLike<any>}
   */
  export let files = [];
  export let isError = false;
</script>

{#if files.length !== 0}
  <div id="selected-files-container">
    <h2>{title}:</h2>
    <div id="files-list">
      {#each Array.from(files) as file, i (i)}
        <div id={isError ? 'selected-file-card-error' : 'selected-file-card'}>
          <span>{file.name}</span>
          <span>{Math.round(file.size / 1000)} KB</span>
        </div>
      {/each}
    </div>
  </div>
{/if}

<style>
  #selected-files-container {
    text-align: center;
  }

  #files-list {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #selected-file-card {
    display: flex;
    justify-content: space-between;
    color: #06345f;
    font-weight: bolder;
    width: 500px;
    padding-left: 15px;
    margin-top: 10px;
  }

  #selected-file-card-error {
    display: flex;
    justify-content: space-between;
    color: #06345f;
    font-weight: bolder;
    width: 500px;
    padding-left: 15px;
    margin-top: 10px;
    color: red;
  }

  @media only screen and (max-device-width: 812px) {
    #selected-files-container,
    #selected-file-card-error {
      width: 100%;
    }

    #selected-file-card {
      width: 100%;
    }
  }
</style>
