<script lang="ts">
  import { numberOfUnreadNotification } from "$lib/store";
  import { getImageURL, convertToSlug } from "$lib/utils";

  export let data;

  let allBlogPosts = data?.getAllBlogPost;
</script>

<svelte:head>
  <title>
    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Stock
    Analysis Blog · stocknear</title
  >
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />

  <meta
    name="description"
    content="Get the latest blog post to understand and invest correctly into companies."
  />
  <!-- Other meta tags -->
  <meta property="og:title" content="Stock Analysis Blog · stocknear" />
  <meta
    property="og:description"
    content="Get the latest blog post to understand and invest correctly into companies."
  />
  <meta property="og:type" content="website" />
  <!-- Add more Open Graph meta tags as needed -->

  <!-- Twitter specific meta tags -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Stock Analysis Blog · stocknear" />
  <meta
    name="twitter:description"
    content="Get the latest blog post to understand and invest correctly into companies."
  />
  <!-- Add more Twitter meta tags as needed -->
</svelte:head>

<section
  class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden min-h-screen pb-20 pt-5 px-4 lg:px-3"
>
  <div class="w-full overflow-hidden m-auto mt-5">
    <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
      <div
        class="relative flex justify-center items-start overflow-hidden w-full"
      >
        <main class="w-full">
          <div class="mb-6 border-b-[2px]">
            <h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
              Stock Analysis Blog
            </h1>
          </div>

          <div class="w-full grid grid-cols-1 sm:grid-cols-3 sm:gap-5">
            {#if allBlogPosts?.length !== 0}
              {#each allBlogPosts as item}
                <div
                  class="flex flex-col overflow-hidden rounded-lg shadow-lg sm:hover:shadow-2xl border border-gray-600"
                >
                  <div class="flex-shrink-0">
                    <a href={"/blog/article/" + convertToSlug(item?.title)}
                      ><img
                        class="h-48 w-full object-cover"
                        src={getImageURL(
                          item?.collectionId,
                          item?.id,
                          item?.cover,
                        )}
                        alt="Stock Analysis Blog Post Wallpaper"
                        loading="lazy"
                      /></a
                    >
                  </div>
                  <div
                    class="flex flex-1 flex-col justify-between bg-table p-4 xs:p-5 sm:p-6"
                  >
                    <div class="flex-1">
                      <a
                        href={"/blog/article/" + convertToSlug(item?.title)}
                        class="mt-2 block"
                        ><h2 class="text-xl font-semibold text-white">
                          {item?.title}
                        </h2>
                        <p class="mt-3 text-sm text-white">
                          {item?.abstract.length > 250
                            ? item?.abstract?.slice(0, 250) + "..."
                            : item?.abstract}
                        </p></a
                      >
                    </div>
                    <div class="mt-6 flex items-center">
                      <div class="flex space-x-1 text-sm text-white">
                        Published: <time datetime={item?.created} class="ml-1">
                          {new Date(item?.created)?.toLocaleString("en-US", {
                            month: "short",
                            day: "numeric",
                            year: "numeric",
                            daySuffix: "2-digit",
                          })}</time
                        >
                      </div>
                    </div>
                  </div>
                </div>
              {/each}
            {/if}
          </div>
        </main>
      </div>
    </div>
  </div>
</section>
