<script lang="ts">
	import type { InstanceRole } from '$lib/auth';

	interface Props {
		role: InstanceRole;
		size?: 'sm' | 'md';
	}

	let { role, size = 'md' }: Props = $props();
</script>

<span class="chip chip-{role}" class:sm={size === 'sm'}>{role}</span>

<style>
	.chip {
		display: inline-flex;
		align-items: center;
		padding: 0.15rem 0.55rem;
		border-radius: 999px;
		font-size: 0.7rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		border: 1px solid transparent;
	}
	.chip.sm {
		font-size: 0.625rem;
		padding: 0.1rem 0.45rem;
	}
	.chip-owner {
		background: #78350f;
		color: #fbbf24;
		border-color: #b45309;
	}
	.chip-admin {
		background: #164e63;
		color: #67e8f9;
		border-color: #0e7490;
	}
	.chip-member {
		background: #1e293b;
		color: #cbd5e1;
		border-color: #334155;
	}
</style>
