---
import scriptIcon from "../assets/script.png";

let projects = Astro.props.projects;

console.log(projects);
---

<div
	class="window"
	id="projects"
	style="width: 70%; height: 45%; position: absolute; left: 15%; top: 22%; display: none;"
>
	<div id="projectsheader" class="title-bar">
		<div class="title-bar-text">Projects</div>
		<div class="title-bar-controls">
			<button class="close" aria-label="Minimize"></button>
			<button class="close" aria-label="Close"></button>
		</div>
	</div>
	<div class="window-body" style="height: 85%;">
		<div id="inner">
			<div
				id="projects-container"
				style="display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 10px;"
			>
				{
					projects.map((item) => (
						<div
							class="project"
							id={`${item.id}item`}
							style="display: flex; flex-direction: column; align-items: left; margin: 1px; width: 120px;"
						>
							<img src={scriptIcon.src} class="w-auto h-16" />
							<h3
								class="text-lg"
								style="white-space: normal; overflow-wrap: break-word; text-align: center;"
							>
								{item.title}
							</h3>
						</div>
					))
				}
			</div>
		</div>
	</div>
</div>

<style>
	#inner {
		height: 100%;

		appearance: none;
		background-color: #fff;
		border-radius: 0;
		box-shadow:
			inset -1px -1px #fff,
			inset 1px 1px grey,
			inset -2px -2px #dfdfdf,
			inset 2px 2px #0a0a0a;
		box-sizing: border-box;
		padding: 3px 4px;

		overflow: auto;
	}

	.project {
		user-select: none;

		flex: 0 0 110px; /* Flex-grow | Flex-shrink | Flex-basis */

		height: 150px;

		display: flex;

		align-items: center;
	}

	#projects-container {
		display: flex; /* Use Flexbox */
		flex-wrap: wrap; /* Allow items to wrap to the next line */
		gap: 10px; /* Adds space between items */
		justify-content: flex-start; /* Align items to the left */
		align-items: flex-start; /* Align items to the top */
		padding: 10px; /* Add some padding around the container */

		height: 100%;
	}
</style>
