package templates

import "github.com/haydenhargreaves/Potion/internal/templates/components"
import domain "github.com/haydenhargreaves/Potion/internal/domain/server"
import domain_user"github.com/haydenhargreaves/Potion/internal/domain/user"

templ userDetailsSection(user domain_user.User) {
	<section class="w-full flex flex-col justify-center my-8 py-4 border-b border-gray-300">
		<div class="w-full p-4 md:p-8 flex items-center gap-x-8">
			<img
				class="w-24 md:w-32 border-2 border-blue-500 rounded-full shadow-blue-500 shadow select-none"
				src={ user.ImageUrl }
			/>
			<div class="">
				<h1 class="text-md md:text-2xl font-semibold">{ user.Name }</h1>
				<p class="text-xs md:text-sm">{ user.Email }</p>
			</div>
		</div>
	</section>
}

templ logoutSection() {
	<section class="w-full flex flex-col justify-center items-center py-8 border-t border-gray-300">
		<a
			href={domain.API_AUTH_LOGOUT}
			class="text-center border border-red-500 text-red-500 w-9/10 md:w-1/3 py-2 rounded-lg hover:cursor-pointer hover:bg-red-100 duration-300"
		>
			Logout
		</a>
	</section>
}

templ ProfilePage(user domain_user.User) {
	@components.Navbar(" profile")
	<div class="w-full h-screen flex justify-center">
		<div
			class="mx-2 md:mx-0 w-full md:w-1/2 md:pt-14 border-l border-r border-gray-300 bg-white flex flex-col justify-between"
		>
			@userDetailsSection(user)
			@logoutSection()
		</div>
	</div>
}