---
interface Props {
	year: string;
	connector: "wave" | "line";
}

const { year, connector } = Astro.props;
const connectorClass =
	connector === "wave"
		? "h-[0.17em] w-[0.52em] [filter:var(--mono-filter)]"
		: "h-[0.1em] w-[0.55em] [filter:var(--mono-filter)]";
---

<div
    class="grid min-w-0 grid-cols-[2.25em_0.55em_minmax(0,1fr)] items-center gap-[0.5em]"
>
    <time class="whitespace-nowrap" datetime={year}>{year}</time>
    <img
        class={connectorClass}
        src={`/about/separator-${connector}.svg`}
        alt=""
        aria-hidden="true"
    />
    <div
        class="flex min-w-0 flex-wrap items-center gap-x-[0.34em] gap-y-[0.2em] lg:flex-nowrap"
    >
        <slot />
    </div>
</div>