---
import { staticPath } from '@shared/lib/assets'
import { people } from '@shared/lib/people'
import Avatar from '@ui/Avatar.astro'
import photos from '@data/photos.json'
import { requireIndex } from '@shared/lib/array'
import CardTitle from '@ui/CardTitle.astro'

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

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

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

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