<script lang="ts">
    import type { IPost } from "$type/post";
    import { localeLink } from '$lib/translations';
    export let data: IPost;
    export let className: string = '';
</script>
<div class="sidebar-author-wrap">
  <div class="sb-author-row">
    <div class="sb-avatar"><img src="{data.authorData.avatar.thumbnail}" alt="{data.authorData.name}" width="96" height="96"></div>
    <div>
      <a href="{localeLink()}/author/{data.authorData.slug}" class="sb-name">{data.authorData.name}</a>
      <div class="sb-role">{data.authorData.position}</div>
      <a href="{data.authorData.linkedin}" target="_blank" rel="noopener" class="author-linkedin" style="margin-top:6px"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path></svg> LinkedIn</a>
    </div>
  </div>
  <p class="sb-bio">{data.authorData.description}</p>
</div>
<!--
<div class="asideCreator {className}">
  <div class="asideCreator__person">
    <p class="asideCreator__label">{$t('Written by')}</p>
    <a href={`/author/${data.authorData.slug}`} class="asideCreator__row">
      <img
        alt={data.authorData.name}
        class="asideCreator__avatar"
        src={data.authorData.avatar.thumbnail}
      />
      <div class="asideCreator__info">
        <p class="asideCreator__name">{data.authorData.name}</p>
        <p class="asideCreator__role">{data.authorData.position}</p>
      </div>
    </a>
  </div>
  {#if data.expertData?.name}
    <div class="asideCreator__person">
      <p class="asideCreator__label">
        <img src={expert} alt="expert" class="asideCreator__expertIcon" />
        {$t('Expert Reviewed')}
      </p>
      <a href={`/author/${data.expertData.slug}`} class="asideCreator__row">
        <img
          alt={data.expertData.name}
          class="asideCreator__avatar"
          src={data.expertData.avatar.thumbnail}
        />
        <div class="asideCreator__info">
          <p class="asideCreator__name">{data.expertData.name}</p>
          <p class="asideCreator__role">{data.expertData.position}</p>
        </div>
      </a>
    </div>
  {/if}
</div>
-->
<style lang="scss">
  @import 'src/scss/variables';
  @import 'src/scss/media';

  .sidebar-author-wrap {
    padding-bottom: 20px; margin-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
  }
  .sb-author-row { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
  .sb-avatar {
    width: 96px; height: 96px; min-width: 96px; overflow: hidden; flex-shrink: 0;
    clip-path: url(#authorShape);
    -webkit-clip-path: url(#authorShape);
    border: 1px solid #e5e7eb;
  }
  .sb-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .sb-name {
    font-size: 0.875rem; font-weight: 700; color: #141414;
    text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.3; margin-bottom: 2px;
    white-space: nowrap;
    text-decoration: none;
  }
  .sb-name:hover { text-decoration: underline; }
  .sb-role {
    font-size: 0.8125rem; color: #5a6872; font-weight: 500; line-height: 1.3;
  }
  .sb-bio {
    font-size: 0.8125rem; color: #374151; line-height: 1.55;
  }

  .author-card {
    display: flex; gap: 20px; align-items: flex-start;
    padding: 32px; background: #f7f9fb; border-radius: 12px;
    margin-bottom: 40px;
  }
  .author-card-avatar {
    width: 72px; height: 72px; min-width: 72px; overflow: hidden;
    clip-path: url(#authorShape);
    -webkit-clip-path: url(#authorShape);
    border: 1px solid #e5e7eb;
  }
  .author-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .author-card-info { flex: 1; }
  .author-card-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #889aa8; margin-bottom: 6px; }
  .author-card-name { font-size: 1.0625rem; font-weight: 700; color: #141414; margin-bottom: 2px; }
  .author-card-role { font-size: 0.8125rem; color: #889aa8; margin-bottom: 8px; }
  .author-card-bio { font-size: 0.875rem; line-height: 1.6; color: #5a6872; }
  .author-linkedin { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 0.8125rem; font-weight: 600; color: #0a66c2; text-decoration: none; transition: opacity .2s; }
  .author-linkedin:hover { opacity: .75; }
  .author-linkedin svg { width: 16px; height: 16px; }
</style>