<template>
	<nav class="domains">
		<Link
			:href="getPath('scenes')"
			class="domain domain-scenes nolink"
			:active="domain === 'scenes'"
		>
			<Icon icon="clapboard-play" />
			<span class="domain-label">Scenes</span>
		</Link>

		<Link
			:href="getPath('actors')"
			class="domain domain-actors nolink"
			:active="domain === 'actors'"
		>
			<Icon icon="star" />
			<span class="domain-label">Actors</span>
		</Link>

		<Link
			:href="getPath('movies')"
			class="domain domain-movies nolink"
			:active="domain === 'movies'"
		>
			<Icon icon="movie" />
			<span class="domain-label">Movies</span>
		</Link>
	</nav>
</template>

<script setup>
const props = defineProps({
	stash: {
		type: Object,
		default: null,
	},
	domain: {
		type: String,
		default: 'scenes',
	},
});

function getPath(targetDomain) {
	return `/stash/${props.stash.user.username}/${props.stash.slug}/${targetDomain}`;
}
</script>

<style scoped>
.domains {
	display: flex;
	justify-content: center;
	gap: .5rem;
	padding: 0 1rem;
}

.domain {
	height: 100%;
	box-sizing: border-box;
	padding: .75rem 1rem;
	color: var(--highlight-strong-10);
	font-size: .9rem;
	font-weight: bold;

	.icon {
		display: none;
		height: 1rem;
		fill: var(--highlight-strong-10);
	}

	&.active,
	&:hover {
		color: var(--text-light);

		.icon {
			fill: var(--text-light);
		}
	}
}

.domain-actors .icon {
	transform: translateY(1px);
}

.domains-bar {
	background: var(--grey-dark-50);
	box-shadow: inset 0 0 3px var(--shadow);
}

@media(--small-60) {
	.domains-bar {
		.domain {
			font-size: 0;
		}

		.domain .icon {
			display: inline-flex;
		}

		.domain-label {
			display: none;
		}
	}
}
</style>