---
import { markdownToHtml } from '@/lib/markdown';
import { Image } from 'astro:assets';

interface Props {
    contact: ContactComponent;
}

const contact = Astro.props.contact;
---

<div
    id={`contact-${contact.id}`}
    class="flex lg:flex-row flex-col lg:justify-center justify-center items-center py-12 px-12 lg:container mx-auto gap-y-8 lg:gap-x-28 gap-x-18 lg:text-left text-center"
>
    <div class="flex flex-col gap-1.5">
        <h2 class="text-5xl font-bold">{contact.title}</h2>
        <div set:html={markdownToHtml(contact.text)}></div>
    </div>

    <div class="flex flex-col gap-2">
        { contact.methods.map((method) => (
            <a href={method.url} target="_blank" style={{ "--sc": method.color }} class="flex flex-row items-center gap-2 text-lg hover:text-(--sc) duration-200">
                <Image
                    src={method.icon.url}
                    alt={method.title}
                    width="30"
                    height="30"
                />
                <span>{method.title}</span>
            </a>
        )) }
    </div>
</div>