---
import Avatar from '@ui/Avatar.astro'
import Icon from '@ui/Icon.astro'
import Button from '@ui/Button.astro'
import ButtonList from '@ui/ButtonList.astro'
import people from '@data/people.json'

const person = people[3]
---

<!-- BEGIN HEADER PROFILE -->
<div class="page-header">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-auto">
        <Avatar person={person} size="lg" />
      </div>
      <div class="col">
        <h1 class="fw-bold m-0">{person.full_name}</h1>
        <div class="my-2">Unemployed. Building a $1M solo business while traveling the world. Currently at $400k/yr.</div>

        <div class="list-inline list-inline-dots text-secondary">
          <div class="list-inline-item">
            <Icon name="map" inline />
            {person.university}, {person.country}
          </div>
          <div class="list-inline-item">
            <Icon name="mail" inline />
            <a href="#" class="text-reset">{person.email}</a>
          </div>
          <div class="list-inline-item">
            <Icon name="cake" inline />
            {person.birth_date}
          </div>
        </div>
      </div>
      <div class="col-auto ms-auto">
        <ButtonList>
          <Button icon="dots" iconOnly />
          <Button icon="message" iconOnly />
          <Button icon="check" color="primary" text="Following" />
        </ButtonList>
      </div>
    </div>
  </div>
</div>
<!-- END HEADER PROFILE -->