<script lang="ts">
    import { SOCIAL_LINKS, TRANSITION_COLORS } from "$lib/core/constants";
	import { cn } from "$lib/utils";
	const themes = {
		light: "bg-brand-100 text-brand-950 hover:bg-brand-300 active:bg-brand-200",
		dark: "bg-brand-950 text-brand-50 hover:bg-brand-800 active:bg-brand-600",
	};
	interface Props {
		padding?: string;
		iconSize?: string;
		theme?: "light" | "dark";
	}

	let {
		padding = "p-2",
		iconSize = "h-4 w-auto",
		theme = "dark",
	}: Props = $props();
</script>

<div class="flex items-center gap-2">
	{#each SOCIAL_LINKS as link}
		<a
			href={link.link}
			class={cn(
				"grid place-items-center rounded-full",
				themes[theme],
				TRANSITION_COLORS,
				padding,
			)}
			target="_blank"
		>
			<link.icon class={cn(iconSize)} />
		</a>
	{/each}
</div>
