<script setup lang="ts">
interface Post {
  slug: string;
  title: string;
  date: string;
  description: string;
}

defineProps<{
  posts: Post[];
  linkTo?: (slug: string) => string;
}>();
</script>

<template>
  <section class="blog-section">
    <ul class="tui-list">
      <li v-for="post in posts" :key="post.slug" class="blog-entry">
        <NuxtLink v-if="linkTo" class="entry-link" :to="linkTo(post.slug)">
          <span class="entry-title">{{ post.title }}</span>
        </NuxtLink>
        <NuxtLink v-else class="entry-link" :to="`#${post.slug}`">
          <span class="entry-title">{{ post.title }}</span>
        </NuxtLink>
        <span class="entry-meta">[{{ post.date }}] {{ post.description }}</span>
      </li>
    </ul>
  </section>
</template>

<style lang="scss" scoped>
.tui-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.blog-entry {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 16px;
  border-left: 2px solid var(--color-border-color);
  margin-bottom: 4px;
  transition: all 0.1s steps(2, end);

  &:hover {
    border-left-color: var(--color-link);
    background-color: var(--color-hover);
  }

  &::before {
    display: none;
  }
}

.entry-link {
  text-decoration: none;
  color: var(--color-text);

  &:hover {
    color: var(--color-link);
    text-shadow: 0 0 6px var(--color-link);
  }
}

.entry-title {
  font-size: 1rem;
  transition: all 0.1s steps(2, end);
}

.entry-meta {
  color: var(--color-text);
  font-size: 0.8rem;
  opacity: 0.6;
}

@media screen and (max-width: 600px) {
  .blog-entry {
    padding: 6px 12px;
  }

  .entry-title {
    font-size: 0.9rem;
  }
}
</style>
