---
import Layout from '../layouts/Layout.astro'
import { Page, Row, Logo } from '../../@dasig'
import ArticleCard from '../components/ArticleCard.astro'

const articles = Object.values(import.meta.glob('../content/articles/*.md', { eager: true }))

function getArticleData(post: any) {
  const slug = post.frontmatter.slug
  const alt = slug.replace(/-/g, ' ')
  const category = post.frontmatter.category
  let categoryColor

  if (category === 'Technology') {
    categoryColor = 'blue'
  } else if (category === 'Poem') {
    categoryColor = 'yellow'
  }

  return {
    category: post.frontmatter.category,
    categoryColor: categoryColor,
    url: `read/${slug}`,
    title: post.frontmatter.title,
    subtitle: post.frontmatter.subtitle,
    imageA: `../@dasig/images/${slug}.avif`,
    imageW: `../@dasig/images/${slug}.webp`,
    alt: alt,
    minutes: post.frontmatter.minutes,
    date: post.frontmatter.date,
  }
}
---

<Layout title="Articles - Pat Alcala">
  <Page alignment="column">
    <Row wrap gap={1} content="left">
      <Logo size={90} />
      <h1 class="title">Pat's Articles</h1>
    </Row>

    <div class="articles">
      <Row wrap gap={1}>
        {
          articles.map((post: any) => {
            const data = getArticleData(post)
            return <ArticleCard {...data} />
          })
        }
      </Row>
    </div>
  </Page>

  <style lang="sass">
    @use '../../configs/design/colors.sass' as colors
    @use '../styles/fonts.sass' as fonts

    h1
      color: colors.$white
      margin: 0
      font-family: fonts.$Literata
      font-weight: bold

    .articles
      padding: 2rem 0 0 0
  </style>
</Layout>