<script lang="ts">
  import BlogCard from '../../card/BlogCard.svelte';
  import type { IPost } from '$type/post';
  import { t } from '$lib/translations';
  import { getLocaleUrl } from '$lib/translations';
  import arrow from '$assets/images/main/arr.svg';

  export let posts: IPost[] = [];

  $: displayedPosts = posts.slice(0, 4);
</script>

<div class="block-blog">
  <div class="block-blog__header">
    <h2 class="block-blog__title">{$t('Blog')}</h2>
    <a href={getLocaleUrl('/blog')} class="block-blog__show-all">
      {$t('Show all')} <span><img src={arrow} alt="arrow" /></span>
    </a>
  </div>

  <div class="block-blog__grid">
    {#each displayedPosts as post (post.id)}
      <BlogCard className="block-blog__card" data={post} />
    {/each}
  </div>
</div>

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

  .block-blog {
    padding: 112px 0 0px 0;
    background: #f2f5f7;
    overflow: hidden;
    width: 100%;

    @include breakpoint-down('deskL') {
      padding: 100px 0 0 0;
    }

    @include breakpoint-down('deskS') {
      padding: 56px 0 0 0;
    }

    @include breakpoint-down('tabM') {
      padding: 56px 0 29px;
    }

    &__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
      max-width: 1440px;
      margin-left: auto;
      margin-right: auto;
      padding: 0 56px;

      @media (max-width: 1366px) {
        padding: 0 40px;
      }

      @include breakpoint-down('deskS') {
        padding: 0 32px;
      }

      @media (max-width: 480px) {
        padding: 0 24px;
      }

      @media (max-width: 393px) {
        padding: 0 20px;
      }
    }

    &__title {
      font-weight: 400;
      font-size: 32px;
      line-height: 40px;
      color: #1b1c1d;

      @media (max-width: 1024px) {
        font-size: 28px;
        line-height: 36px;
      }

      @media (max-width: 480px) {
        font-size: 24px;
        line-height: 28px;
      }

      @media (max-width: 393px) {
        font-size: 20px;
        line-height: 26px;
      }
    }

    &__show-all {
      font-size: 14px;
      line-height: 20px;
      color: #1b1c1d;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: color 0.2s ease, background 0.2s ease;
      padding: 8px 12px 8px 12px;
      border: 1px solid #cdd1d4;
      border-radius: 48px;

      @media (max-width: 1366px) {
        padding: 6px 12px 6px 12px;
      }

      img {
        width: 16px;
        height: 16px;
      }

      &:hover {
        background: #d4d8db;
        border-color: transparent;
      }

      &:active {
        background: #adb1b7;
        border-color: transparent;
      }

      span {
        font-size: 14px;
        line-height: 20px;
      }
    }

    &__grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 56px;

      @media (max-width: 1366px) {
        padding: 0 40px;
      }

      @media (max-width: 1024px) {
        padding: 0 32px;
      }

      @media (max-width: 720px) {
        grid-template-columns: 1fr 1fr;
        gap: 40px 20px;
      }

      @media (max-width: 480px) {
        padding: 0 24px;
      }

      @media (max-width: 393px) {
        padding: 0 20px;
        grid-template-columns: 1fr;
      }
    }
  }
</style>