<script lang="ts">
	import identity from '$stores/identity';
	import locale from '$stores/locale';
	import Icon from '@iconify/svelte';

	export let live: any;
	export let pinStream: (streamer: string) => void;
	export let pinnedStreams: string[];
</script>

<div class="stream card">
	{#if $identity.id !== -2}
		<div class="pin-icon">
			<a
				href={'#'}
				on:click={(e) => {
					e.preventDefault();
					pinStream(live.streamer);
				}}
			>
				<Icon
					icon={`pajamas:thumbtack${pinnedStreams.includes(live.streamer) ? '-solid' : ''}`}
					width="1em"
				/>
			</a>
		</div>
	{/if}

	<p class="stream-heading">
		[{#if live.streaming}
			<b class="live">{$locale().hololive.live}</b
			>{:else if new Date(live.time).getTime() < Date.now()}
			<span class="ended">{$locale().hololive.ended}</span>{:else}
			<span class="upcoming">{$locale().hololive.upcoming}</span>{/if}]
		<b>{live.streamer}</b> <span class="opaque">|</span>
		{$locale().hololive.dateFormatter(new Date(live.time))}
		{#if live.guests.length > 0}
			<br />
			<small>
				{$locale().hololive.with}{live.guests
					.join($locale().hololive.comma)
					.replace(
						new RegExp(`${$locale().hololive.comma}([^${$locale().hololive.commaNoSpace}]+)$`, 'g'),
						`${$locale().hololive.comma}${$locale().hololive.ampersand}$1`
					)}
			</small>
		{/if}
	</p>

	<a href={live.link} class="preview" target="_blank">
		<img src={live.livePreviewImage} alt="Stream Thumbnail" />
	</a>
</div>

<style lang="scss">
	.preview {
		// margin: 0.15rem;

		img {
			border-radius: 8px;
			height: 20vh;
			object-fit: cover;
			transition: transform 0.3s ease;
		}

		&:hover {
			img {
				position: relative;
				z-index: 2;
				transition: transform 0.3s ease;
				transform: scale(1.05);
			}
		}

		display: flex;
		justify-content: center;
		align-items: center;
	}

	.live {
		color: var(--base0F);
	}

	.upcoming {
		color: var(--base0C);
	}

	.ended {
		color: var(--base0D);
	}

	.pin-icon {
		position: absolute;
		right: 0;
		top: 0;
		padding: 0.75rem;
	}

	.stream {
		position: relative;
	}

	.stream-heading {
		padding-right: 2em;
	}
</style>
