package components

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

templ experienceCard(exp domain.Experience) {
	<section class="h-full w-full flex relative items-center">
		<div class="flex h-[600px] sm:px-12 lg:py-40 w-full items-center gap-12 justify-between">
			<!-- Left Side: Job Details -->
			<div class="p-6 w-1/2 flex flex-col gap-4 bg-slate-800 rounded-lg hover:bg-slate-800 transition-all animate-slide">
				<h3 class="text-2xl font-semibold text-white">{ exp.Job.Title }</h3>
				<div class="flex flex-col gap-2">
					<a href={ templ.SafeURL(exp.Company.Link) } class="text-emerald-400 font-medium text-lg ">{ exp.Company.Name }</a>
					<p class="text-slate-400 ">{ exp.Duration() }</p>
					<p class="text-slate-600 text-sm">{ exp.GetStartDate() } - { exp.GetEndDate() } </p>
					<a href={ templ.SafeURL(exp.Company.LocationLink) } class="text-emerald-500">{ exp.Company.City }</a>
				</div>
				<div class="flex flex-wrap gap-2">
					for _, stack := range slices.Concat(exp.Job.FrontendStack, exp.Job.BackendStack, exp.Job.InfrastructureStack) {
						@techStack(stack)
					}
				</div>
			</div>
			<!-- Timeline Marker -->
			<div></div>
			<!-- Right Side: Company & Role Details -->
			<div class="flex flex-col w-1/2 gap-6 p-6 bg-slate-800 rounded-lg animate-slideIn">
				<div class="flex flex-col gap-2">
					<h4 class="text-xl font-medium">About { exp.Company.Name }</h4>
					for _, description := range strings.Split(exp.Company.Description, "\n") {
						<p class="text-slate-300">
							{ description }
						</p>
					}
				</div>
				<div class="flex flex-col gap-2">
					<h4 class="text-xl font-medium">Role & Responsibilities</h4>
					<div class="text-slate-300 whitespace-pre-wrap">
						{ exp.Job.Description }
					</div>
				</div>
			</div>
		</div>
	</section>
}