<script>
    import { getNamedId } from '$lib/util';
    import Avatar from './avatar.svelte';
    import GlowFX from './fx/glowfx.svelte';
    import PerspectiveFX from './fx/perspectivefx.svelte';
    import Mention from './mention.svelte';
    import Rating from './rating.svelte';
    import RatingVertical from './ratingvertical.svelte';
    import Useritem from './useritem.svelte';

  /**
   * @type {import('$types/base').Post}
   */
  export let post;
</script>

<style type="scss">
  .postCardOutline {

    border-radius: 18px;
    padding: 2px;

    position: relative;

    background-size: 350vw;
    background-position: 90% 0%;
    background-image: linear-gradient(30deg, #7d65ff30 45%, white 50%, transparent 55%);

    transition: ease-out 0.5s;

    &:hover {
      background-position: 0% 0%;

      & .postCard {
        background-position: 0% 0%;
      }
    }
  }

  .postCard {
    display: block;

    text-decoration: none;

    border-radius: 16px;
    padding: 16px;
    background: #12121b;

    background-size: 300vw;
    background-position: 100% 0%;
    background-image: linear-gradient(30deg, #131320 40%, #373052 50%, #12121b 60%);

    position: relative;

    transition: ease-out 0.2s;
  }

  .title {
    font-size: 1.2rem;
    margin: 0;
  }

  .postContainer {
    display: flex;
    flex-flow: row nowrap;
    gap: 8px;
  }

  .sidePad {
    display: flex;
    flex-flow: column nowrap;
    padding: 18px 0px;
    gap: 16px;
  }

  .mention {
    text-decoration: none;
    color: var(--accent);
    padding: 0em 0.2em;
    background: var(--accent-dim);
    border-radius: 0.2em;
  }
</style>

<div class="postContainer">
  <div class="sidePad">
    <Avatar size={32}></Avatar>
    <RatingVertical rating={post.rating}></RatingVertical>
  </div>
  <GlowFX borderRadius={18} opacity={0.7} style="flex: 1;">
    <div class="postCardOutline">
      <a class="postCard" href="/posts/{getNamedId(post.id, post.name)}">
        <Mention user={post.author}></Mention>
        <h6 class="title taviraj-regular">{post.name}</h6>
        <p>{post.category.name}</p>
        <p>{post.content}</p>
        </a>
    </div>
  </GlowFX>
</div>
