---
import ButtonLink from "../../components/ButtonLink.astro"
import Divider from "../../components/Divider.astro"
import RoundDivider from "../../components/RoundDivider.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 } = Astro.params
const project = projects.find((project) => project.route === route)
if (project == null) return
---

<Layout page={project.name}>
	<div id={styles.container}>
		<section id={styles.jumbo}>
			<h1 class={styles.title}>{project.name}</h1>
			<Divider />
			<p class={styles.overview}>{project.overview}</p>
			<RoundDivider />
		</section>
		<section id={styles.details}>
			<div 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.computerImage}`}
						alt={`Image of ${project.name}`}
						class={styles.screenshot}
					/>
				</article>
			</div>
		</section>
	</div>
</Layout>