---
import { data } from '@/data/data.js'

type Props = {
  class?: string
}

const { class: className, ...rest } = Astro.props
const { basics } = data.profile
---

<div class:list={['sidebar', className]} {...rest}>
  <div>
    <div><b>🌐 Location</b></div>
    <div>{basics.location.city} {basics.location.countryCode}</div>
  </div>
  <div>
    <div><b>✉️ Email</b></div>
    <div><a href={`mailto:${basics.email}`}>{basics.email}</a></div>
  </div>
  <div>
    <div><b>🕸️ Website</b></div>
    <div><a href={basics.url}>{basics.url}</a></div>
  </div>
  <div>
    <div><b>🙊 Lanuages</b></div>
    <div>{basics.languages.map((l) => l.name).join(', ')}</div>
  </div>
</div>

<style lang='less'>
  .sidebar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    text-align: right;
    gap: var(--space-md);

    @media screen and (max-width: 768px) {
      text-align: center;
      align-items: center;
    }

    @media print {
      flex-direction: row;
    }

    b {
      font-weight: bold;
    }
  }
</style>