<script lang="ts">
	import type { GuildRole } from "$lib/api";
	import BaseListItem from "./RemovableListItem.svelte";

	export let buttonText: string | undefined = undefined;
	export let role: GuildRole | string;

	const colour = (c: string) => (c === "#000000" ? "current-color" : c);
</script>

<BaseListItem on:click {buttonText}>
	{#if typeof role === "string"}
		(unknown role {role})
	{:else}
		<span style="color: {colour(role.colour)};">&#x25CF;</span>
		{role.name}
	{/if}
</BaseListItem>
