---
import { Row, Column, Padding } from '../../@dasig'

interface Props {
  title: string
  subtitle: string
  date: string
  imageA: string
  imageW: string
  alt: string
  minutes: number
  url: string
  category: string
  categoryColor: string
}

const { title, subtitle, date, imageA, imageW, alt = 'article image', minutes, url, category = 'Technology', categoryColor = 'blue' } = Astro.props
---

<section class="article">
  <a href={url}>
    <Column gap={1} content="top">
      <picture>
        <source srcset={imageA} type="image/avif" />
        <source srcset={imageW} type="image/webp" />
        <img class="picture" width="100%" height="auto" decoding="async" loading="lazy" alt={alt} />
      </picture>
      <Row content="left">
        <Padding top={0} bottom={1} left={1} right={1}>
          <Padding top={0} bottom={1} left={0} right={0}>
            <Row content="left" gap={0.5}>
              <span class={`category--${categoryColor}`}>{category}</span>
              <span class="minutes">{minutes} min read</span>
            </Row>
          </Padding>
          <Row gap={1} content="left">
            <div class="article__titles">
              <span class="article__title">{title}</span>
              <h2 class="article__subtitle">{subtitle}</h2>
            </div>
          </Row>
          <div class="dateandtime">
            <Row content="right">
              <span>{date}</span>
            </Row>
          </div>
        </Padding>
      </Row>
    </Column>
  </a>
</section>

<style lang="sass">
  @use '../styles/fonts' as fonts
  @use 'sass:color'

  $blue: #1d3b52
  $yellow: #4f521d
  $red: #521d2c

  .article
    max-width: 23rem
    height: auto
    background-color: color.adjust(#0A0A0A, $lightness: 9%)
    border-radius: 1rem
    cursor: pointer

    &__titles
      height: auto

    &__title
      font-size: 0.8rem
      font-weight: 700
      font-family: fonts.$Literata

    &__subtitle
      font-size: 0.65rem
      font-weight: 500
      opacity: 0.8

  .dateandtime
    font-family: fonts.$Inter
    width: 100%
    padding: 0.5rem 0 0 0
    font-size: 0.5rem
    font-weight: 500
    opacity: 0.6

  .picture
    border-radius: 1rem 1rem 0 0

  .minutes
    font-size: 10px

  .category
    @extend .minutes
    border-radius: 1rem
    padding: 0.5rem

    &--blue
      @extend .category
      color: $blue
      background-color: color.adjust($blue, $lightness: 65%)

    &--yellow
      @extend .category
      color: $yellow
      background-color: color.adjust($yellow, $lightness: 65%)

    &--red
      @extend .category
      color: $red
      background-color: color.adjust($red, $lightness: 65%)
</style>
