tabler/shared/components/cards/GalleryPhoto.astro

---
// `photo` and `index` are passed explicitly from the parent loop.
import { staticPath } from '@shared/lib/assets'
import Avatar from '@ui/Avatar.astro'
import Icon from '@ui/Icon.astro'
import { randomNumber, timeagoLabel } from '@shared/lib/pseudo-random'

interface Photo {
  file: string
  [key: string]: unknown
}

interface Person {
  full_name?: string
  photo?: string
  [key: string]: unknown
}

interface Props {
  photo: Photo
  person: Person
  /** 1-based loop index — seeds the deterministic pseudo-random values */
  index: number
  hideLikes?: boolean
}

const { photo, person, index, hideLikes } = Astro.props

// Heart filled when (index > 2 && index < 9) || index === 10.
const heartClass = (index > 2 && index < 9) || index === 10 ? 'icon-filled text-red' : undefined
---

<div class="card card-sm">
  <a href="#" class="d-block"><img src={staticPath(`photos/${photo.file}`)} class="card-img-top" /></a>
  <div class="card-body">
    <div class="d-flex align-items-center">
      <Avatar person={person} class="me-3 rounded" />
      <div>
        <div>{person.full_name}</div>
        <div class="text-secondary">{timeagoLabel(index, 10)}</div>
      </div>
      {
        !hideLikes && (
          <div class="ms-auto">
            <a href="#" class="text-secondary">
              <Icon name="eye" />
              {randomNumber(index, 300, 600)}
            </a>
            <a href="#" class="ms-3 text-secondary">
              <Icon name="heart" class={heartClass} />
              {randomNumber(index, 20, 100)}
            </a>
          </div>
        )
      }
    </div>
  </div>
</div>