<script lang="ts">
	import Icon from '@iconify/svelte';
	import { dateFormatLong, dateFormatShort } from '$lib/util/Dates';

	let {
		dateString,
		type = undefined,
		highlight = false,
		showTime = false,
		class: className = ''
	}: {
		dateString?: string;
		type?: 'published' | 'updated' | 'eventStart' | 'eventFinish';
		highlight?: boolean;
		showTime?: boolean;
		class?: string;
	} = $props();

	const typeToIcon = {
		published: 'material-symbols:calendar-today',
		updated: 'material-symbols:update',
		eventStart: 'material-symbols:rocket-launch',
		eventFinish: 'material-symbols:sports-score'
	};

	const icon = type ? typeToIcon[type] : undefined;

	const highlightClasses = (classes: string) => (highlight ? classes : '');
</script>

<div
	class="flex flex-nowrap items-center gap-2 p-1 text-lg font-bold {className} rounded-lg
    {highlightClasses(
		type === 'published' ? 'bg-amber-600' : type === 'updated' ? 'bg-purple-600' : ''
	)}
	{highlightClasses(
		type === 'eventStart' ? 'bg-rose-600' : type === 'eventFinish' ? 'bg-teal-600' : ''
	)}
    {highlightClasses('text-slate-50')}"
>
	{#if icon}
		<Icon {icon} width={28} height={28} />
	{/if}
	<span class="text-nowrap">
		{dateString
			? (showTime ? dateFormatLong : dateFormatShort).format(new Date(dateString))
			: 'Не опубликован!'}
	</span>
</div>
