package components

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

templ techStack(stack domain.Stack) {
	if stack.Link != "" {
		<a
			href={ templ.SafeURL(stack.Link) }
			class="group flex items-center gap-2 px-3 py-2 rounded-md bg-slate-700/30 hover:bg-slate-700/50 transition-colors duration-200"
		>
			if stack.Logo != "" {
				<img src={ stack.Logo } alt={ stack.Name + " logo" } class="w-5 h-5 object-contain"/>
			}
			<span class="text-emerald-500 w-fit font-medium group-hover:text-emerald-400">{ stack.Name }</span>
		</a>
	} else {
		<div class="flex items-center gap-2 px-3 py-2 rounded-md bg-slate-700">
			if stack.Logo != "" {
				<img src={ stack.Logo } alt={ stack.Name + " logo" } class="w-5 h-5 object-contain"/>
			}
			<span class="text-white w-fit font-medium">{ stack.Name }</span>
		</div>
	}
}