---
import type { Activity } from '@/lib/site/types'

type Props = {
  activity: Activity[]
}

const { activity } = Astro.props
const total = activity.length
const touched = activity.filter((cell) => cell.touched).length
const latest = activity.at(-1)?.touched ?? false
const summary = `Updated in ${touched} of ${total} recent release${total === 1 ? '' : 's'}${latest ? ', including the latest' : ''}`
---

{total > 0 && (
  <p class="activity-strip">
    <span class="activity-strip__summary">{summary}</span>
    <span class="activity-strip__cells" aria-hidden="true">
      {activity.map((cell, i) => (
        <span
          class:list={[
            'activity-strip__cell',
            cell.touched && 'activity-strip__cell--touched',
            cell.touched && i === total - 1 && 'activity-strip__cell--latest',
          ]}
          title={`v${cell.release.version}`}
        />
      ))}
    </span>
  </p>
)}