<script lang="ts">
	import { page } from '$app/state';
	import InfoBlock from '$src/lib/components/InfoBlock.svelte';
	import type { PageData } from './$types';
	import Icon from '@iconify/svelte';

	export let data: PageData;

	const isPublic = !!data.blogPost.date;
</script>

<base target="_blank" />

<svelte:head>
	<meta name="twitter:card" content="summary_large_image" />
</svelte:head>

<section class="hero flex shrink-0 flex-col items-center justify-center gap-5 overflow-hidden p-4">
	<div
		class="flex flex-col flex-nowrap items-center justify-center gap-3 lg:flex-row lg:flex-nowrap"
	>
		<div class="text-left">
			<h1>{data.blogPost.title}</h1>
			{#if data.blogPost.description}
				<h2 class="text-gray">{data.blogPost.description}</h2>
			{/if}
		</div>
	</div>
</section>

<section
	class="flex shrink-0 flex-col items-center justify-center p-4 font-bold {isPublic
		? 'bg-amber-50 text-slate-950'
		: 'bg-red-500 text-slate-50'} sm:flex-row sm:flex-nowrap sm:gap-5"
>
	<div class="flex items-center">
		<Icon icon="material-symbols:calendar-today" class="mr-3" width={24} height={24} />
		<p>
			{data.blogPost.date
				? new Date(data.blogPost.date).toLocaleString(undefined, {
						month: 'short',
						day: 'numeric',
						year: 'numeric'
					})
				: 'Не опубликован!'}
		</p>
	</div>
	{#if data.blogPost.dateChanged}
		<div class="flex items-center font-bold">
			<Icon icon="material-symbols:update" class="mr-3" width={24} height={24} />
			<p>
				{new Date(data.blogPost.dateChanged).toLocaleString(undefined, {
					month: 'short',
					day: 'numeric',
					year: 'numeric'
				})}
			</p>
		</div>
	{/if}
</section>

{#if page.data.blogPost.projects?.length > 0}
	<InfoBlock>
		<p>В данной заметке упоминаются наши проекты:</p>
		<ul>
			{#each page.data.blogPost.projects as project}
				<li>{project}</li>
			{/each}
		</ul>
	</InfoBlock>
{/if}

<article
	class="prose
		sm:prose-xl
		prose-slate
		prose-code:break-words
		prose-pre:drop-shadow-md
		prose-headings:font-disket
		prose-headings:mb-4
		prose-headings:font-bold prose-headings:text-slate-950 prose-h1:text-2xl
		prose-h1:sm:text-4xl prose-h2:text-xl
		prose-h2:sm:text-3xl mx-auto
		prose-p:text-justify
		w-5xl
		p-4
		text-base
		text-slate-950
		sm:text-xl lg:p-8"
>
	<svelte:component this={data.content} />
</article>

<style>
	@import '$src/app.css';
</style>
