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

interface Props {
  title: string
  subtitle: string
  category: string
  date: string
  minutes: number
  content: string
}

const { title, subtitle, category, date, minutes, content } = Astro.props
---

<Page>
  <div class="article__titles">
    <span class="article__titles__category">{category}</span>
    <h1 class="article__titles__title">{title}</h1>
    <h3 class="article__titles__subtitle">{subtitle}</h3>
  </div>

  <div class="content">
    <p set:html={content} />
  </div>
</Page>

<style lang="sass">
  .article
    display: flex
    gap: 20px
    flex-direction: column
    flex-wrap: wrap
    justify-content: start
    align-items: start
    text-align: left

    &__titles
      width: 100%
      display: flex
      gap: 1rem
      flex-direction: column
      flex-wrap: wrap
      align-items: start
      padding: 0 9rem 2rem 9rem

      &__category
        border: 1px solid red
        border-radius: 1.5rem
        padding: 0.5rem 0.75rem
        font-size: 1rem

      &__title
        font-size: 2.625rem
        margin: 0

      &__subtitle
        font-size: 1.375rem
        opacity: 0.8
        margin: 0

  .content
    padding: 0 15rem
</style>
