<script lang="ts">
  import { browser } from '$app/environment';
  import { locale, localeLink } from '$lib/translations';
  import { cookieAccept } from '../../store';

  if (browser) {
    cookieAccept.set(Boolean(localStorage?.getItem('cookie')));
  }

  const cookie = () => {
    if (browser) {
      cookieAccept.set(true);
      localStorage.setItem('cookie', 'true');
    }
  };
</script>

<div class="cookie">
  <div class="cookieContainer">
    <div class="cookieText">
      By continuing to use this site you consent with our
      <a href="{localeLink()}/cookie-policy" class="cookieLink">cookie policy </a>
    </div>
    <div on:keydown={() => false} role="button" tabindex="0" on:click={cookie} class="cookieButton">Accept</div>
  </div>
</div>

<style lang="scss">
  @import 'src/scss/media';
  @import 'src/scss/mixins';
  @import 'src/scss/variables';

  .cookie {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: $fontPrimary;
    padding: 8px;
    z-index: 11;

    @include breakpoint-down('tabM') {
      position: fixed;
      top: auto;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 20px 20px;
    }
  }

  .cookieContainer {
    width: max-content;
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 24px;

    @include breakpoint-down('tabM') {
      width: max-content;
      max-width: 100%;
    }
  }

  .cookieText {
    @include smallDefault;

    color: $techWhite;
  }

  .cookieLink {
    @include smallDefault;

    margin-left: 4px;
    color: $linkPrimary;
    text-decoration: underline;
  }

  .cookieButton {
    @include smallCTA;

    cursor: pointer;
    color: $techWhite;
    border: 1px solid $techWhite;
    padding: 3px 35px;
    border-radius: 40px;
  }
</style>