<script lang="ts">
  import type { IPost } from "$type/post";
  import { getLocaleUrl, getRouteByPostType, t } from "$lib/translations";
  export let data: IPost;
</script>

<div class="read-also">
{#if data.readAlso.length}
  <h3>{$t('blog.moreOnThis')}</h3>
  <ul class="read-also-list">
    {#each data.readAlso as post}
      <li><a href="{getLocaleUrl(`/${getRouteByPostType(post?.type ?? '')}/${post.slug}`)}">{post.title}</a></li>
    {/each}
  </ul>
{/if}
</div>

<style lang="scss">
  .read-also { margin-bottom: 48px; }
  .read-also h3 { font-size: 1rem; font-weight: 700; color: #141414; margin-bottom: 12px; }
  .read-also-list { list-style: none; padding: 0; }
  .read-also-list li {
    padding: 12px 0; border-bottom: 1px solid #eaedf0;
  }
  .read-also-list li:last-child { border-bottom: none; }
  .read-also-list a {
    font-size: 0.9375rem; font-weight: 500; color: #141414;
    transition: color 0.2s;
  }
  .read-also-list a:hover { color: #E62334; }
</style>