---
import { Icon } from 'astro-icon/components'
import type { CollectionEntry } from 'astro:content'
import Card from '../Card.astro'
import FormattedDate from '../FormattedDate.astro'
import Label from '../Label.astro'

interface Props {
	content: CollectionEntry<'post'>
	simple?: boolean
	socialImage?: string
}

const {
	content: { data, render },
	simple = false,
	socialImage
} = Astro.props
const { remarkPluginFrontmatter } = await render()
---

{
	socialImage && (
		<div class='mb-6'>
			<img src={socialImage} class='rounded-2xl object-cover' loading='eager' />
		</div>
	)
}

<div class='flex flex-wrap items-center gap-x-3 gap-y-2'>
	<p class='text-xs'>
		<FormattedDate date={data.date} /> /{' '}
		{remarkPluginFrontmatter.minutesRead}
	</p>

	{
		!simple && (
			<>
				{data.date_modified ? (
					<div class='flex flex-row items-center gap-x-2 text-xs'>
						<p class='text-muted-foreground'>最新更新:</p>
						<FormattedDate date={data.date_modified} />
					</div>
				) : null}
				<Label
					title={data.category ?? '未分类'}
					as='a'
					href={`/categories/${data.category ?? '未分类'}/`}
				>
					<Icon name='category' slot='icon' />
				</Label>
			</>
		)
	}
</div>
<h1 class='mt-2 text-3xl font-medium sm:mb-1'>
	{data.title}
</h1>

{
	!simple && !!data.tags?.length && (
		<div class='mt-3 flex flex-row items-center gap-x-1'>
			<svg
				aria-hidden='true'
				class='me-1 inline-block h-6 w-6'
				fill='none'
				focusable='false'
				stroke='currentColor'
				stroke-linecap='round'
				stroke-linejoin='round'
				stroke-width='1.5'
				viewBox='0 0 24 24'
				xmlns='http://www.w3.org/2000/svg'
			>
				<path d='M0 0h24v24H0z' fill='none' stroke='none' />
				<path d='M7.859 6h-2.834a2.025 2.025 0 0 0 -2.025 2.025v2.834c0 .537 .213 1.052 .593 1.432l6.116 6.116a2.025 2.025 0 0 0 2.864 0l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-6.117 -6.116a2.025 2.025 0 0 0 -1.431 -.593z' />
				<path d='M17.573 18.407l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-7.117 -7.116' />
				<path d='M6 9h-.01' />
			</svg>
			<div class='space-x-1'>
				{data.tags?.map((tag) => (
					<a
						aria-label={`View more blogs with the tag ${tag}`}
						class="inline-block before:content-['#'] hover:underline hover:underline-offset-4"
						data-pagefind-filter='tag'
						href={`/tags/${tag}/`}
					>
						{tag}
					</a>
				))}
			</div>
		</div>
	)
}

{
	data.description && data.description.trim().length > 0 && (
		<Card heading='摘要（由ai生成）' altText='摘要' class='my-4 w-full'>
			<div class='ml-4 text-muted-foreground'>{data.description}</div>
		</Card>
	)
}
