type BlogCardProps = {
	img: string
	title: string
	text: string
	author: string
	lasUpdate: Date
	id: string
}

export function BlogCard(
	{ img, title, text, author, lasUpdate, id }: BlogCardProps,
) {
	return (
		<div class='components__blog_card' style={{ backgroundImage: img }}>
			<div class='components__blog_card__spacer'></div>
			<h3>
				<a href={`/blog/${id}`}>{title}</a>
			</h3>
			<div class='components__blog_card__text'>
				{`${text.slice(0, 150)} ...`}
			</div>
			<div class='components__blog_card__footer'>
				<div>
					<i class='ri-quill-pen-line'></i>
					<span>{author}</span>
				</div>
				<div>
					<i class='ri-refresh-line'></i>
					<span>{lasUpdate.toLocaleDateString()}</span>
				</div>
			</div>
		</div>
	)
}

const text =
	'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, perferendis enim blanditiis consequatur at porro quod, eligendi alias recusandae modi aliquam non? Quos voluptates quisquam provident animi nisi in ratione.'

export const blogMock: BlogCardProps[] = Array(50).fill(undefined).map(
	(_, index) => {
		return {
			author: 'PGP',
			lasUpdate: randomDate(),
			title: `Some title here ${index}`,
			text,
			img: `url("https://picsum.photos/id/${index}/300/200")`,
			id: String(index),
		}
	},
)

function randomDate() {
	return new Date(Date.now() - Math.random() * 1e10)
}