---
import { Icon } from 'astro-icon';
import './ProjectItem.scss';

export interface Props {
	data: ProjectType;
}

const { data } = Astro.props as Props;
const { icon, name, year, description, articleUrl, sourceUrl, demoUrl } = data;
---

<div class="project-item">
	<div class="project-item__heading">
		<h2>
			<Icon name={icon} width="20" height="20" />
			{name}
		</h2>
		<span>{year}</span>
	</div>
	<div class="project-item__description">
		<p>{description}</p>
	</div>
	<div class="project-item__links">
		{articleUrl && (
			<a class="btn-link" href={articleUrl} target="_blank">
				Статья
			</a>
		)}
		{sourceUrl && (
			<a class="btn-link" href={sourceUrl} target="_blank">
				Исходник
				<Icon name="link-out" width="15" height="15" />
			</a>
		)}
		{demoUrl && (
			<a class="btn-link" href={demoUrl} target="_blank">
				Демо
				<Icon name="link-out" width="15" height="15" />
			</a>
		)}
	</div>
</div>