---
type Relation = "owner" | "maintainer";
const relationTitle: Record<Relation, string> = {
	owner: "I am an administrator of this project",
	maintainer: "I am a collaborator that helps maintain this project",
};

type Props = {
	language: string;
	relation: Relation;
};

const { language, relation } = Astro.props;
---

<dl>
	<dt>Relation</dt>
	<dd class="relation" title={relationTitle[relation]}>{relation}</dd>
	<dt>Language</dt>
	<dd>{language}</dd>
</dl>

<style>
	dl {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 0.5rem;
	}
	dt {
		font-weight: bold;
		grid-column: 1;
	}
	dd {
		grid-column: 2;
	}
	@media (min-width: 640px) {
		dt {
			grid-column: unset;
			grid-row: 1;
		}
		dd {
			grid-column: unset;
			grid-row: 2;
		}
		dt,
		dd {
			margin: 0;
			text-align: center;
		}
	}
	.relation {
		text-decoration: underline;
		cursor: help;
	}
</style>