---
import type { CommunityEvent } from '../data/events';

interface Props {
  event: CommunityEvent;
}

const { event } = Astro.props;
---

<article class:list={['event-card', event.next && 'next']}>
  <div class="event-top">
    <span class:list={['event-kicker', event.next && 'next']}>{event.kicker}</span>
    <span class="event-date">{event.date}</span>
  </div>
  <h3 class="event-title">{event.title}</h3>
  <p class="event-desc">{event.desc}</p>
  {
    event.tags.length > 0 && (
      <div class="event-tags">
        {event.tags.map((tag) => (
          <span class="chip">{tag}</span>
        ))}
      </div>
    )
  }
</article>