src/lib/components/match-info.svelte

<script lang="ts">
	import type { Match } from '$lib/types';
	import { Badge } from '$lib/components/ui/badge';
	import { cn } from '$lib/utils';
	import CalendarIcon from 'phosphor-svelte/lib/CalendarIcon';
	import MapPinIcon from 'phosphor-svelte/lib/MapPinIcon';
	import ShieldIcon from 'phosphor-svelte/lib/ShieldIcon';
	import SwordIcon from 'phosphor-svelte/lib/SwordIcon';
	import FilmSlateIcon from 'phosphor-svelte/lib/FilmSlateIcon';
	import ArrowSquareOutIcon from 'phosphor-svelte/lib/ArrowSquareOutIcon';
	import HashIcon from 'phosphor-svelte/lib/HashIcon';
	import { formatDateTime, prettyMap } from '$lib/utils/format';
	import { mapColorClasses } from '$lib/utils/map-colors';

	interface Props {
		match: Match;
	}
	let { match }: Props = $props();

	const team1Wins = $derived(match.winner === 'team1');
	const winnerSide = $derived((match.winner_side ?? '').toLowerCase());
</script>

<div class="space-y-3">
	<div>
		<div class="text-xs tracking-wide text-muted-foreground uppercase">Event</div>
		<div class="mt-0.5 font-heading text-sm font-semibold">{match.event}</div>
	</div>

	<div class="border-y py-3">
		<div class="grid grid-cols-[1fr_auto_1fr] items-center gap-3">
			<div
				data-winning={team1Wins}
				class="text-right text-sm font-medium data-[winning=false]:text-muted-foreground"
			>
				{match.team1}
			</div>
			<div class="flex items-center gap-1 font-heading text-xl font-bold tabular-nums">
				<span data-winning={team1Wins} class="data-[winning=true]:text-primary">{match.score1}</span
				>
				<span class="text-muted-foreground/40">:</span>
				<span data-winning={!team1Wins} class="data-[winning=true]:text-primary"
					>{match.score2}</span
				>
			</div>
			<div
				data-winning={!team1Wins}
				class="text-left text-sm font-medium data-[winning=false]:text-muted-foreground"
			>
				{match.team2}
			</div>
		</div>
	</div>

	<dl class="grid grid-cols-2 gap-x-3 gap-y-2 text-xs">
		<dt class="inline-flex items-center gap-1 text-muted-foreground">
			<MapPinIcon size={12} weight="duotone" /> Map
		</dt>
		<dd class="text-right">
			<Badge class={cn('gap-1 border capitalize', mapColorClasses(match.map_name))}>
				{prettyMap(match.map_name)}
			</Badge>
		</dd>

		<dt class="inline-flex items-center gap-1 text-muted-foreground">
			<FilmSlateIcon size={12} weight="duotone" /> Format
		</dt>
		<dd class="text-right font-medium uppercase">{match.format}</dd>

		<dt class="inline-flex items-center gap-1 text-muted-foreground">
			<CalendarIcon size={12} weight="duotone" /> Played
		</dt>
		<dd class="text-right font-medium">{formatDateTime(match.match_date)}</dd>

		{#if winnerSide === 'ct' || winnerSide === 't'}
			<dt class="inline-flex items-center gap-1 text-muted-foreground">
				{#if winnerSide === 'ct'}
					<ShieldIcon size={12} weight="duotone" />
				{:else}
					<SwordIcon size={12} weight="duotone" />
				{/if}
				Winner
			</dt>
			<dd class="text-right">
				{#if winnerSide === 'ct'}
					<Badge
						class="gap-1 border border-sky-500/40 bg-sky-500/15 text-sky-700 dark:text-sky-300"
					>
						<ShieldIcon size={11} weight="duotone" /> CT won
					</Badge>
				{:else}
					<Badge
						class="gap-1 border border-amber-500/40 bg-amber-500/15 text-amber-700 dark:text-amber-300"
					>
						<SwordIcon size={11} weight="duotone" /> T won
					</Badge>
				{/if}
			</dd>
		{/if}

		<dt class="inline-flex items-center gap-1 text-muted-foreground">
			<HashIcon size={12} weight="duotone" /> Rounds
		</dt>
		<dd class="text-right font-medium tabular-nums">{match.rounds_played}</dd>
	</dl>

	{#if match.match_url}
		<a
			class="inline-flex items-center gap-1 text-xs text-muted-foreground underline-offset-2 hover:text-foreground hover:underline"
			href={match.match_url}
			target="_blank"
			rel="noreferrer noopener"
		>
			<ArrowSquareOutIcon size={12} weight="duotone" /> View on HLTV
		</a>
	{/if}
</div>