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

interface Props {
  title?: string
  right?: boolean
  imgId?: number
}

const { title, right, imgId = 1 } = Astro.props

const photo = requireIndex(photos as { file: string; title: string }[], imgId)
const imgClass = `w-100 h-100 object-cover ${right ? 'card-img-end' : 'card-img-start'}`
---

<div class="card">
  <div class="row row-0">
    <div class={`col-3${right ? ' order-md-last' : ''}`}>
      <!-- Photo -->
      <img src={staticPath(`photos/${photo.file}`)} class={imgClass} alt={photo.title} />
    </div>
    <div class="col">
      <div class="card-body">
        {
          title && (
            <CardTitle>
              <Fragment set:html={title} />
            </CardTitle>
          )
        }
        <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
      </div>
    </div>
  </div>
</div>