package components

import "github.com/moh682/portfolio/domain"

templ tag(tag string) {
	<span class="px-3 py-1 w-fit text-sm bg-slate-700 text-slate-300 rounded-full">{ tag }</span>
}

templ status(status string) {
	<span class={ "px-3 py-1 w-fit text-sm bg-emerald-700 text-white rounded-full", templ.KV("bg-yellow-600/50", status =="In Progress") }>{ status }</span>
}

templ projectCard(project domain.Project) {
	<div class="group bg-slate-800 rounded-lg overflow-hidden transition-all duration-300 hover:transform hover:scale-[1.02] hover:shadow-xl">
		<div class="relative overflow-hidden aspect-video">
			<img
				src={ project.Thumbnail }
				alt={ project.Name }
				class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
			/>
			<div class="absolute inset-0 bg-gradient-to-t from-slate-900 to-transparent opacity-0 group-hover:opacity-60 transition-opacity duration-300"></div>
		</div>
		<div class="flex flex-col gap-4 p-6">
			<div class="flex flex-col gap-2">
				<h3 class="text-xl font-bold text-slate-100">{ project.Name }</h3>
				@status(project.Status)
				<p class="text-slate-400 mb-4 line-clamp-2">{ project.Description }</p>
				<div class="flex flex-wrap gap-2">
					for _, t := range project.Stack {
						@tag(t)
					}
				</div>
			</div>
			if project.GithubLink != "" {
				<a
					href={ templ.SafeURL(project.GithubLink) }
					target="_blank"
					rel="noopener noreferrer"
					class="inline-flex items-center text-emerald-500 hover:text-emerald-400 transition-colors"
				>
					View Project 
					<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor">
						<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
					</svg>
				</a>
			}
		</div>
	</div>
}

templ ProjectsPage(projects []domain.Project) {
	@rootLayout() {
		<main class="w-full min-h-full py-16 px-4 sm:px-6 lg:px-8">
			<div class="max-w-7xl mx-auto">
				<h1 class="text-4xl font-bold text-slate-100 mb-2">Projects</h1>
				<p class="text-slate-400 mb-12">A collection of projects I've worked on</p>
				<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
					for _, project := range projects {
						@projectCard(project)
					}
				</div>
			</div>
		</main>
	}
}