---
import { Image } from "astro:assets";
import Socials from "../socials/Socials.astro";

import pfp_new from "../images/pfp_new_medium.webp";
import pfp_light from "../images/pfp_light.webp";
import Card from "../global/Card.astro";
---

<div class="relative flex w-full items-center justify-center">
	<div class="w-[90%] md:w-[600px] lg:w-2/3">
		<Card
			shadowColor="rgb(4, 57, 57)"
			className="theme-dark-card animate-fadeIn bg-gradient-to-br from-[#101010] via-[#252525] to-[#101010]"
		>
			<div class="flex flex-col items-center justify-center gap-2 py-10">
				<div class="mb-1 px-5">
					<Image
						src={pfp_new}
						alt="Profile picture"
						class="profile-image-dark border-accent aspect-square rounded-full border-2 border-solid object-cover"
						width={150}
					/>
					<Image
						src={pfp_light}
						alt="Profile picture"
						class="profile-image-light border-accent hidden aspect-square rounded-full border-2 border-solid object-cover"
						width={150}
					/>
				</div>
				<div class="text-center">
					<div class="mb-2 text-3xl">Ryan Lee</div>
					<div class="text-muted-foreground text-xl">
						Software Developer &amp; Content Creator
					</div>
				</div>
				<div
					class="mt-5 flex flex-col items-stretch justify-center gap-5 md:flex-row"
				>
					<div
						class="flex flex-col justify-center text-center md:text-left"
					>
						<div class="text-muted-foreground text-base">
							Email me at:
						</div>
						<div>
							<a
								href="mailto:hello@rython.dev"
								class="hover:text-accent">hello@rython.dev</a
							>
						</div>
					</div>

					<!-- vertical divider -->
					<div class="bg-accent h-[1px] w-full md:h-auto md:w-[1px]">
					</div>

					<div class="flex flex-row items-center justify-center">
						<Socials />
					</div>
				</div>
			</div>
		</Card>
	</div>
</div>

<style>
	:global(html[data-theme="light"]) .profile-image-dark {
		display: none;
	}

	:global(html[data-theme="light"]) .profile-image-light {
		display: block;
	}

	#title {
		background: linear-gradient(
			90deg,
			#85e6c5 0%,
			#a084e8 45%,
			#33bbc5 100%
		);

		background-size: 300%;

		background-clip: text;
		-webkit-background-clip: text;

		-webkit-text-fill-color: transparent;
	}
</style>