---
// person = people[person-id]; the cover photo is photos[person-id].file.
// Base card-cover already carries `card-cover-blurred`; `blurred` adds it a 2nd time
// Base card-cover already carries `card-cover-blurred`; `blurred` adds it a second time.
import Avatar from '@ui/Avatar.astro'
import people from '@data/people.json'
import photos from '@data/photos.json'

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

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

interface Props {
  personId?: number
  blurred?: boolean
}

const { personId = 0, blurred } = Astro.props
const person = (people as Person[])[personId]
const photo = (photos as Photo[])[personId]
---

<a class="card card-link" href="#">
  <div class={`card-cover card-cover-blurred text-center${blurred ? ' card-cover-blurred' : ''}`} style={`background-image: url(./static/photos/${photo.file})`}>
    <Avatar size="xl" person={person} thumb />
  </div>
  <div class="card-body text-center">
    <h3 class="card-title mb-1">{person.full_name}</h3>
    <div class="text-secondary">{person.job_title}</div>
  </div>
</a>