---
import Layout from '../layouts/BaseLayout.astro';

import {  SignIn, SignOut } from 'auth-astro/components';
import KarKarCarAuth from "../components/KarKarCarAuth.astro"
// 1. Import any dependencies (Full support for JavaScript/TypeScript)

import { getUser, type KarKarCarSession } from "../api/index"
import UserInfo from "../components/UserInfo.astro"
import config  from 'auth:config'
import { Image } from 'astro:assets';
import logo from '../images/logo-urdina.png';

const session = await getUser(Astro.request, config);

---
<Layout>
	<div class="flex justify-center">
		<Image src={logo} alt="KarKarCar" class="max-w-xs" />
	</div>
	
	<UserInfo session={session} />
	<KarKarCarAuth>
		{(session: KarKarCarSession) => (
			<>
				{session ? 
					<SignOut class="px-8 py-4 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors duration-200 font-medium text-xl">Irten/Salir</SignOut>
				:
					<SignIn provider="keycloak" class="px-8 py-4 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200 font-medium text-xl" style="background-color: #005f7d;">Sartu/Entrar</SignIn>
				}
			</>
		)}
	</KarKarCarAuth>
</Layout>