---
import Datetime from "./Datetime.astro";
import { Card, Heading } from "react-bulma-components";
import { slugifyStr } from '../utils/slugify.js';
import { SITE } from '../config.js';
import Tag from "./Tag.astro";

interface Frontmatter {
  title: string;
  pubDatetime: Date | string;
  modDatetime?: Date | null | string;
  description: string;
  ogImage?: string | object;
  tags: string[];
}

export interface Props {
  href?: string;
  frontmatter: Frontmatter;
  secHeading?: boolean;
}

const { href, frontmatter } = Astro.props;

function getOgImageUrl(frontmatter: Frontmatter): string {
  if (typeof frontmatter.ogImage === 'string') {
    return frontmatter.ogImage !== ''
      ? frontmatter.ogImage
      : SITE.ogImage;
  }
  if (typeof frontmatter.ogImage === 'object' && 'src' in frontmatter.ogImage) {
    return (frontmatter.ogImage as { src: string }).src;
  }
  return SITE.ogImage;
}

---

<a href={href}>
  <Card className={"view-transition-" + slugifyStr(frontmatter.title) + " mb-3" } >
    <div class="card-image">
      <figure class="image">
        <img
          src={getOgImageUrl(frontmatter)}
          alt="Article image preview"
          onerror='this.onerror = null; this.src="./og.webp"'
          fetchpriority="low"
        />
      </figure>
    </div>
    <Card.Content>
      <Heading size={3}>{frontmatter.title}</Heading>
      {frontmatter.tags.map(tag => <Tag tag={slugifyStr(tag)} />)}
      <Datetime pubDatetime={frontmatter.pubDatetime} modDatetime={frontmatter.modDatetime} className="mb-1" />
      <p>{frontmatter.description}</p>
    </Card.Content>
  </Card>
</a>