---
import ButtonLink from "../../components/ButtonLink.astro"
import Divider from "../../components/Divider.astro"
import styles from "../../styles/Project.module.css"
import Layout from "../../layouts/Layout.astro"
import projects from "../../projects.json"

export function getStaticPaths() {
	return projects.map((project) => ({
		params: { route: project.route }
	}))
}

const { route: projectRoute } = Astro.params
const project = projects.find((project) => project.route === projectRoute)
if (project == null) return
---

<Layout page={project.name} description={project.description}>
	<section id={styles.jumbo}>
		<img
			id={styles.thumb}
			src={`/images/${project.thumbImage}`}
			alt={project.name}
		/>
		<h1 class={styles.title}>
			{project.name}
		</h1>
		<Divider />
		<p class={styles.overview}>{project.overview}</p>
	</section>
	<section id={styles.details} class={styles.row}>
		<article class={styles.longDescription}>
			<h2>Description</h2>
			<Divider />
			<section>
				<p>
					{project.description}
					{project.technologies}
				</p>
				<div class={styles.buttonRow}>
					{
						project.github && (
							<ButtonLink href={project.github} newTab>
								Source Code
							</ButtonLink>
						)
					}
					{
						project.demoLink && (
							<ButtonLink href={project.demoLink} newTab>
								Go to demo
							</ButtonLink>
						)
					}
					{
						project.customLink && (
							<ButtonLink href={project.customLink.link} newTab>
								{project.customLink.name}
							</ButtonLink>
						)
					}
				</div>
			</section>
		</article>
		<article class={styles.image}>
			<img
				src={`/images/${project.mainImage}`}
				alt={`Image of ${project.name}`}
				class={styles.screenshot}
			/>
		</article>
	</section>
</Layout>
