---
import PhosphorIcon from './PhosphorIcon.astro'

const ICONS_MAP: Record<string, string> = {
    github: 'github-logo',
    linkedin: 'linkedin-logo',
    website: 'globe',
    mail: 'mailbox',
}

type Props = {
    image: ImageMetadata
    fullName: string
    entranceDate: number
    exitDate?: number
    description: string
    social?: {
        github?: string
        linkedin?: string
        website?: string
        mail?: string
    }
}

const { image, fullName, entranceDate, exitDate, description, social } = Astro.props
---

<div class="bubble">
    <img src={image.src} alt={fullName.toLowerCase()} />
    <div class="title">{fullName}</div>
    <div class="date">{entranceDate}&mdash;{exitDate ?? 'Presente'}</div>
    <div class="description">{description}</div>
    {
        social && (
            <div class="social">
                {Object.entries(social).map(([key, value]) => (
                    <a href={value} target="_blank" rel="noopener noreferrer">
                        <PhosphorIcon name={ICONS_MAP[key] ?? 'question-mark'} />
                    </a>
                ))}
            </div>
        )
    }
</div>