---
interface Props {
  name: string;
  title?: string;
  photo: string;
  details?: string;
}

const { name, title, photo, details } = Astro.props;
---

<header
  class="flex flex-col md:flex-row items-center gap-8 mb-4 mt-48 print:mt-4"
>
  <div
    class="w-48 h-48 flex-shrink-0 overflow-hidden rounded-full border-4 border-gray-200 bg-gray-100"
  >
    <img src={photo} alt={name} class="w-full h-full object-cover" />
  </div>
  <div class="text-center md:text-left mt-24">
    <h1 class="text-4xl font-bold text-gray-800 ml-20">{name}</h1>
    {title && <h2 class="text-2xl text-gray-600 mt-2">{title}</h2>}
    {details && <span class="text-gray-600 mt-2">{details}</span>}
  </div>
</header>