---
import type { AnyLink } from "@/lib/collections";
import {
  collectionColor,
  formatDate,
  getDomain,
  getFaviconUrl,
} from "@/lib/links";

export interface Props {
  link: AnyLink;
}

const { link } = Astro.props;
const { title, url, description, publishDate, tags, collection } = link.data;
const domain = getDomain(url);
const faviconUrl = getFaviconUrl(url);
---

<li class="link-item">
  <a href={url} class="link-item__link" target="_blank" rel="noopener noreferrer">
    <div class="link-item__main">
      <div class="link-item__title-row">
        <img
          class="link-item__favicon"
          src={faviconUrl}
          alt=""
          width="14"
          height="14"
          loading="lazy"
          onerror="this.style.display='none'"
        />
        <span class="link-item__title">{title}</span>
      </div>
      <span class="link-item__domain">{domain}</span>
      {description && <p class="link-item__desc">{description}</p>}
    </div>
    <div class="link-item__meta">
      <time class="link-item__date" datetime={publishDate.toISOString()}>
        {formatDate(publishDate)}
      </time>
    </div>
  </a>
  {(collection || tags.length > 0) && (
    <div class="link-item__tags">
      {collection && (
        <span class="link-item__collection" style={`background: ${collectionColor(collection)}18; color: ${collectionColor(collection)}`}>
          {collection}
        </span>
      )}
      {tags.map((tag) => (
        <a href={`/links/tag/${encodeURIComponent(tag.toLowerCase())}`} class="link-item__tag">
          #{tag}
        </a>
      ))}
    </div>
  )}
</li>

<style>
  .link-item {
    list-style: none;
    border-bottom: 1px solid #e8e8e6;
    padding: 0.75rem 0;
  }

  .link-item:last-child {
    border-bottom: none;
  }

  .link-item__link {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
  }

  .link-item__link::after {
    content: none;
  }

  .link-item__link:hover .link-item__title {
    color: var(--accent);
  }

  .link-item__main {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
  }

  .link-item__title-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .link-item__favicon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.8;
  }

  .link-item__title {
    font-size: 0.9rem;
    font-weight: 500;
    color: #111;
    transition: color 0.1s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .link-item__desc {
    font-size: 0.8rem;
    color: #777;
    line-height: 1.4;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .link-item__meta {
    flex-shrink: 0;
  }

  .link-item__domain {
    font-size: 0.72rem;
    color: #aaa;
    white-space: nowrap;
  }

  .link-item__date {
    font-size: 0.72rem;
    color: #bbb;
    white-space: nowrap;
  }

  .link-item__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.35rem;
  }

  .link-item__collection {
    font-size: 0.68rem;
    font-weight: 500;
    padding: 0.1em 0.5em;
    border-radius: 3px;
  }

  .link-item__tag {
    font-size: 0.68rem;
    color: #999;
    text-decoration: none;
  }

  .link-item__tag:hover {
    color: var(--accent);
  }
</style>
