---
import DefaultLayout from '../../layouts/DefaultLayout.astro'
import { Card, Pagination } from 'accessible-astro-components'
import blogPosts from '../../../public/blog/blog-posts.json'

export async function getStaticPaths({ paginate }) {
  //const response = await fetch('https://jsonplaceholder.typicode.com/posts')
  //const data = await response.json()
  const data = blogPosts

  return paginate(data, { pageSize: 6 })
}

const { page } = Astro.props
---

<DefaultLayout title="Blog" description="Just my personal blog, where I write about cool projects and endeavours.">
  <section class="my-12">
    <div class="space-content container">
      <h1>Blog</h1>
      <p class="text-2xl">Just my personal blog, where I write about cool projects and endeavours.</p>
    </div>
  </section>
  <section class="my-12">
    <div class="container">
      <p class="text-sm"><em>Posts {page.start + 1}-{page.end + 1} of {page.total} total posts</em></p>
      <ul class="my-3">
        {
          page.data.map((post) => (
            <li>
              <Card url={'/blog/' + post.postId} title={post.title} footer={'Published: ' + post.date} img={post.img}>
                {post.body}
              </Card>
            </li>
          ))
        }
      </ul>
      <div class="mt-12 grid place-content-center">
        <Pagination
          firstPage={page.url.prev ? '/blog' : null}
          previousPage={page.url.prev ? page.url.prev : null}
          nextPage={page.url.next ? page.url.next : null}
          lastPage={page.url.next ? `/blog/${Math.round(page.total / page.size)}` : null}
          currentPage={page.currentPage}
          totalPages={Math.round(page.total / page.size)}
        />
      </div>
    </div>
  </section>
</DefaultLayout>

<style lang="scss" is:global>
  ul {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 4rem;

    @media (min-width: 550px) {
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 2rem;
    }

    @media (min-width: 950px) {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .pagination a,
  .pagination .disabled {
    border-radius: 0.75rem;
  }
  .pagination li:nth-child(1) span, .pagination li:nth-child(5) span {
      border-style: dotted;
  }
  .pagination li:nth-child(2) span, .pagination li:nth-child(4) span {
      border-style: dashed;
  }

  .card {
      transition: inset 0.15s ease-in-out;
    overflow: visible;
    position: relative;
    width: calc(100% - 0.5rem);
    padding: 2rem;

    > * {
      position: relative;
      z-index: 2;
    }

    &::before,
    &::after {
      content: '';
      position: absolute;
    }

    &::before {
      inset: 0;
      background-color: var(--background);
      border: 3px solid var(--neutral-700);
      border-radius: 1rem;
      box-shadow: 0 0 0 6px var(--background);
      z-index: 1;
    }

    &::after {
      background-color: var(--action-color);
      inset: 1rem -0.85rem -0.85rem 1rem;
      border-radius: 1rem;
      z-index: 0;
    }
    &, &::after {
      transition: background-color 0.15s linear;
    }
    &:hover,
    &:focus-within {
      box-shadow: 0 0 0 0rem var(--action-color);
      a:not(.button) {
          color: var(--primary-100);
      }
      &::after {
          background-color: var(--primary-100);
      }
    }
  }

  :global(.card [data-icon]) {
    height: auto;
    width: 4rem;
    color: var(--action-color);
  }

  :global(.darkmode .card::before) {
    background-color: var(--dark-100);
    box-shadow: 0 0 0 6px var(--dark-100);
  }
</style>
