---
import { Image } from 'astro:assets'
import { Icon } from 'astro-icon/components'

interface Props {
  link: string
  title: string
  featureImage?: string
  createdAt?: Date
  updatedAt?: Date
  author?: {
    name: string
    avatar?: string
  }
}

const { link, title, featureImage, author, createdAt, updatedAt } = Astro.props

const formatDate = (date: Date) =>
  `${date.getFullYear()} 年 ${date.getMonth() + 1} 月 ${date.getDate()} 日`
---

<a class="card" href={link}>
  {
    featureImage && (
      <Image
        class="image"
        src={featureImage}
        width={640}
        height={360}
        densities={[1.5, 2]}
        alt="博文的头图"
      />
    )
  }
  <div class="info">
    <h1 class="title">{title}</h1>
    {
      author && (
        <div class="author">
          <Image
            class="image"
            src={author.avatar ?? ''}
            alt={`用户 ${author.name} 的头像`}
            width={24}
            height={24}
            densities={[1.5, 2]}
          />
          <span class="content">{author.name}</span>
        </div>
      )
    }
    {
      createdAt && (
        <div class="iconinfo">
          <Icon class="icon" name="material-symbols:calendar-add-on-rounded" />
          <span class="content">{formatDate(createdAt)}</span>
        </div>
      )
    }
    {
      updatedAt &&
        (!createdAt || formatDate(createdAt) != formatDate(updatedAt)) && (
          <div class="iconinfo">
            <Icon class="icon" name="material-symbols:calendar-check-rounded" />
            <span class="content">{formatDate(updatedAt)}</span>
          </div>
        )
    }
  </div>
</a>

<style>
  .card {
    --icon-size: 24px;

    background-color: var(--color-bg-n);

    margin: 1rem;
    padding-inline: 1rem;
    padding-block: 1.25rem;

    display: flex;
    flex-direction: column;
    /* gap: 0.75rem; */
    border-radius: 2rem;
    transition: all cubic-bezier(0.4, 1, 0.4, 1) 0.3s;

    @media (width >= 768px) {
      flex-direction: row;
      gap: 0.5rem;
    }

    outline: solid 0px transparent;
    &:hover {
      outline-offset: 4px;
      outline: solid 4px var(--color-blue);
    }

    &:has(> .image) {
      padding-block-start: 1rem;
      @media (width >= 768px) {
        padding-block-end: 1rem;
      }

      & > .image {
        border-radius: 1rem;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        margin-block-end: 0.75rem;

        @media (width >= 768px) {
          width: 300px;
          margin-block-end: 0;
        }
      }
    }

    & > .info {
      & > h1 {
        margin-inline: 0.5rem;
        font-size: larger;
        font-weight: 600;
        margin-block-start: 0.25rem;
        margin-block-end: 0.75rem;

        @media (width < 768px) {
          margin-inline: 0.75rem;
        }
      }

      & > .author,
      & > .iconinfo {
        margin-inline: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-block: 0.1rem;

        & > .image {
          aspect-ratio: 1;
          object-fit: cover;
          width: var(--icon-size);
          border-radius: 50%;
        }

        & > .icon {
          width: var(--icon-size);
          height: var(--icon-size);
          padding: 2px;
          opacity: 0.5;
        }

        & > .content {
          opacity: 0.5;
          font-size: 0.9rem;
        }
      }

      & > .author {
        margin-block: 0.25rem;
      }
    }
  }
</style>
