<template>
	<section class="blog">
		<mini-title class="blog__section-title">
			{{ $t("new articles") }}
			<arrow-btn
				href="/blog"
				:title="$t('see all')"
				class="blog__show-all-btn"
			/>
		</mini-title>
		<blog-card
			v-for="post in dataSource"
			:key="post.id"
			:data-source="post"
		/>
	</section>
</template>
<script>
import arrowBtn from "@/components/shared/other/arrow_btn";
import blogCard from "@/components/blog/blog_card";
import miniTitle from "@/components/shared/other/section_mini_title";

export default {
	name: "HomeBlogSection",
	components: {
		arrowBtn,
		blogCard,
		miniTitle,
	},
	props: {
		dataSource: {
			required: true,
			type: Array,
		},
	},
};
</script>
<style lang="scss" scoped>
.blog {
	content-visibility: auto;
	margin: 0 auto;
	max-width: $app-max-width;
	padding: $home-sections-padding 0;
	position: relative;

	&__section-title {
		margin-bottom: $padding-default;
		padding: 0 $padding-default;
	}

	&__show-all-btn {
		float: left;
	}
}


[data-lang="en"] {
	.blog {
		&__show-all-btn {
			float: right;
		}
	}
}
</style>