<script lang="ts">
  export let name = '';
  export let placeholder = '';
  export let value = '';
  export let onChange;
  export let className = '';
  export let error: string | undefined = undefined;
</script>

<div class="textarea {value ? 'focus' : ''} {!!error ? 'error' : ''} {className}">
  <label for={name} class="textareaContainer">
    <textarea id={name} {name} class="textareaTextarea" bind:value on:input={onChange} />
    <span class="textareaPlaceholder">{placeholder}</span>
  </label>
  {#if error !== undefined}
    <p class="textareaError">{error}</p>
  {/if}
</div>

<style lang="scss">
  @import '../../scss/media';
  .textarea {

    &.min {
      @include breakpoint-down('mobM') {
        .textareaTextarea{
          min-height: 177px;
        }
      }
    }
    .textareaContainer {
      display: block;
      background: #fafafa;
      border: thin solid #fafafa;
      border-radius: 16px;
      position: relative;
      padding-top: 30px;
      transition: 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);

      &:hover {
        border: thin solid #d9d7cc;
      }
    }

    .textareaPlaceholder {
      display: block;
      pointer-events: none;
      position: absolute;
      top: 21px;
      left: 16px;
      right: 56px;
      transition: 0.2s cubic-bezier(0.46, 0.03, 0.52, 0.96);
      will-change: transform;
    }

    .textareaTextarea {
      pointer-events: none;
      width: 100%;
      outline: none;
      border: none;
      resize: none;
      background: transparent;
      padding: 0 16px 12px 16px;
      display: block;
      min-height: 126px;

      &:focus {
        + .textareaPlaceholder {
          top: 12px;
          font-size: 12px;
          font-weight: 400;
          line-height: 18px;
          color: #73726c;
        }
      }
    }

    .textareaError {
      padding-left: 16px;
      margin-top: 8px;
      color: #fe150d;
      font-size: 12px;
      font-weight: 400;
      line-height: 18px;
    }

    &.focus {
      .textareaPlaceholder {
        top: 12px;
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
        color: #73726c;
      }
    }

    &.error {
      .textareaContainer {
        outline: thin solid #fe150d;

        &:hover {
          background: #faeded;
        }
      }
    }
  }
</style>