---
import getReadingTime from 'reading-time';

import type { Post } from '@lib/directusTypes';

import Logo from '@components/images/Logo.astro';
import { formatShortDate, formatDate } from '@support/time';
import { getDirectusImageURL } from '@/support/url';

interface Props {
  post: Post;
  enableCategoryLink?: boolean;
  dateFormat?: 'short' | 'long';
}

const { post, enableCategoryLink = true, dateFormat = 'short' } = Astro.props;

const readingTime = getReadingTime(post.content || '');
---

<ol class="flex items-center justify-start card-text-description text-sm whitespace-nowrap gap-2 sm:gap-0 overflow-hidden">
  {post.category && (
  <li class="inline-flex items-center">
    {enableCategoryLink ? (
    <a
      class="inline-flex items-center hover:card-hover-text-description overflow-hidden"
      href={`/categories/${post.category.slug}`}
      data-astro-prefetch
    >
      <div class="flex flex-row items-center shrink-0">
        <div class="mr-2">
          <Logo
            srcLight={getDirectusImageURL(post.category.logoLight)}
            srcDark={getDirectusImageURL(post.category.logoDark)}
            alt={`Logo of ${post.category.title}`}
            width={18}
            height={18}
          />
        </div>
        {post.category.title}
      </div>
    </a>
    ) : (
    <div class="inline-flex items-center overflow-hidden">
      <div class="flex flex-row items-center shrink-0">
        <div class="mr-2">
          <Logo
            srcLight={getDirectusImageURL(post.category.logoLight)}
            srcDark={getDirectusImageURL(post.category.logoDark)}
            alt={`Logo of ${post.category.title}`}
            width={18}
            height={18}
          />
        </div>
        {post.category.title}
      </div>
    </div>
    )}
  </li>
  )}
  <li class="inline-flex items-center">
    <span class="shrink-0 mx-2">
      /
    </span>
  </li>
  <li class="inline-flex items-center">
    <span class="shrink-0 overflow-hidden">
      {dateFormat === 'short' ? formatShortDate(post.published_date) : formatDate(post.published_date)}
    </span>
  </li>
  <li class="inline-flex items-center">
    <span class="shrink-0 mx-2">
      /
    </span>
  </li>
  <li class="inline-flex items-center">
    <span class="shrink-0 overflow-hidden">
      {readingTime.minutes.toPrecision(1)} minutes
    </span>
  </li>
</ol>