---
import { formatDate, readingTime } from "@lib/utils"
import type { CollectionEntry } from "astro:content"

type Props = {
  entry: CollectionEntry<"projects"> | CollectionEntry<"blog">
}

const { entry } = Astro.props
const { collection, data, body } = entry
const { title, summary, date } = data

const demoUrl = collection === "projects" ? data.demoUrl : null
const repoUrl = collection === "projects" ? data.repoUrl : null
---

<div>
  <a href={`/${collection}`} class="group w-fit p-1.5 gap-1.5 text-sm flex items-center border rounded hover:bg-black/5 hover:dark:bg-white/10 border-black/15 dark:border-white/20 transition-colors duration-300 ease-in-out">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="stroke-current group-hover:stroke-black group-hover:dark:stroke-white">
      <line x1="19" y1="12" x2="5" y2="12" class="scale-x-0 group-hover:scale-x-100 translate-x-3 group-hover:translate-x-0 transition-all duration-300 ease-in-out" />
      <polyline points="12 19 5 12 12 5" class="translate-x-1 group-hover:translate-x-0 transition-all duration-300 ease-in-out" />
    </svg>
    <div class="w-full group-hover:text-black group-hover:dark:text-white transition-colors duration-300 ease-in-out">
      Вернуться в {collection}
    </div>
  </a>
  <div class="flex flex-wrap text-sm uppercase mt-12 gap-3 opacity-75">
    <div class="flex items-center gap-2">
      <svg class="size-5 stroke-current">
        <use href="/ui.svg#calendar"/>
      </svg>
      {formatDate(date)}
    </div>
    <div class="flex items-center gap-2">
      <svg class="size-5 stroke-current">
        <use href="/ui.svg#book-open"/>
      </svg>
      {readingTime(body)}
    </div>
  </div>
  <h1 class="text-3xl font-semibold text-black dark:text-white mt-2">
    {title}
  </h1>
  <div class="mt-1">
    {summary}
  </div>
  {(demoUrl || repoUrl) && 
  <div class="mt-4 flex flex-wrap gap-2">
    {demoUrl && 
      <a href={demoUrl} target="_blank" class="group flex gap-2 items-center px-3 py-1.5 truncate rounded text-xs md:text-sm lg:text-base border border-black/25 dark:border-white/25 hover:bg-black/5 hover:dark:bg-white/15 blend">
        <svg class="size-4">
          <use href="/ui.svg#globe" class="fill-current group-hover:fill-black group-hover:dark:fill-white blend"/>
        </svg>
        <span class="text-current group-hover:text-black group-hover:dark:text-white blend">
          See Demo
        </span>
      </a>
    }
    {repoUrl && 
      <a href={repoUrl} target="_blank" class="group flex gap-2 items-center px-3 py-1.5 truncate rounded text-xs md:text-sm lg:text-base border border-black/25 dark:border-white/25 hover:bg-black/5 hover:dark:bg-white/15 blend">
        <svg class="size-4">
          <use href="/ui.svg#link" class="fill-current group-hover:fill-black group-hover:dark:fill-white blend"/>
        </svg>
        <span class="text-current group-hover:text-black group-hover:dark:text-white blend">
          See Repository
        </span>
      </a>
    }
  </div> 
  }
</div>
