import { asset } from "../assets.ts";
import { Article } from "./article.tsx";

const Header = () => (
    <header class="index-header">
        <div style={{ flex: 1 }}>
            <h1>Adædra</h1>
            Software developer
            <br />
            Rust, Ruby, TypeScript, Linux
            <br />
            Paris, France
        </div>
        <img src={asset("cariboudev.avif")} alt="Adaedra's mascot" />
    </header>
);

type Props = {
    articles: Article[];
};

const Articles = ({ articles }: Props) => (
    <>
        <h2>Latest articles</h2>
        <ul class="index-list">
            {articles.map(({ slug, date, document }) => (
                <li>
                    {date.toISODate()}&nbsp;
                    <a
                        href={`/${slug}/`}
                        dangerouslySetInnerHTML={{
                            __html: document.getDocumentTitle() as string,
                        }}
                    />
                </li>
            ))}
        </ul>
    </>
);

const SOCIALS: [string, string, string][] = [
    ["Gitea", "https://gitea.adaedra.eu", "git"],
    ["Mastodon", "https://nerdculture.de/@adaedra", "mastodon"],
    ["LinkedIn", "https://www.linkedin.com/in/thibault-hamel/", "linkedin"],
];

const Socials = () => (
    <>
        <h2>Find me elsewhere</h2>
        <ul class="index-list">
            {SOCIALS.map(([name, url, svgId]) => (
                <li>
                    <a href={url} target="_blank" rel="noopener">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 32 32"
                            aria-label={`${name} Logo`}
                        >
                            <use href={`/logos.svg#${svgId}`} />
                        </svg>
                        {name}
                    </a>
                </li>
            ))}
        </ul>
    </>
);

const Footer = () => <footer class="index-footer"></footer>;

export default (props: Props) => (
    <>
        <Header />
        <Articles {...props} />
        <Socials />
        <Footer />
    </>
);