package pages

import "personal-site/constants"
import "fmt"
import "personal-site/components"

templ projectCard(idx int, project constants.Project) {
<a href={ project.Url } target="_blank"
    class="group rounded-lg px-5 py-4 flex items-start justify-between gap-4 fade-up bg-[#111113] border border-zinc-800 transition-all duration-150 ease-in-out hover:border-zinc-600 hover:bg-[#18181b] hover:-translate-y-0.5"
    style={ fmt.Sprintf("animation-delay: %dms", idx*30) }>
    <div class="flex-1 min-w-0">
        <div class="flex items-center gap-2.5 mb-1.5">
            <span class="text-sm font-medium">{ project.Name }</span>
        </div>
        <p class="text-zinc-500 text-xs leading-relaxed mb-3">{ project.Description }</p>
        <div class="flex flex-wrap gap-1.5">
            for _, tag := range project.TechTags {
            <span class="font-mono text-xs px-2 py-0.5 rounded-sm bg-zinc-800 text-fg-200">{ tag }</span>
            }
        </div>
    </div>
    <div
        class="arrow text-fg-200 mt-0.5 shrink-0 opacity-0 group-hover:opacity-100 transition-all duration-150 ease-in-out">
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M2 12L12 2M12 2H5M12 2V9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                stroke-linejoin="round"></path>
        </svg>
    </div>
</a>
}

templ ProjectPage(projects []constants.Project) {
    {{ params := constants.NewLayoutParams("Home") }}
    @components.MainLayout(params) {
        <div class="fade-up flex flex-col gap-3" style="animation-delay:0ms">
            <p class="mono text-xs text-fg-200 tracking-widest uppercase">derrickgee.dev/projects</p>
            <h1 class="text-3xl font-semibold tracking-tight">Projects Directory</h1>
            <p class="text-fg-200 text-sm leading-relaxed max-w-md">
                A collection of projects built across different languages and frameworks.
                Each runs as an independent service.
            </p>
        </div>
        <hr class="border-base-100 fade-up" style="animation-delay:80ms" />
        for idx, p := range projects {
            @projectCard(idx, p)
        }
    }
}