<template>
	<!-- Inline / Small variant -->
	<div
		v-if="variant === 'inline' || variant === 'sm'"
		class="flex items-center gap-3"
	>
		<figure>
			<img
				v-if="author.avatar"
				:src="author.avatar"
				:alt="author.name"
				:class="[
					'rounded-full object-cover',
					variant === 'sm' ? 'w-8 h-8' : 'w-10 h-10',
				]"
			/>
			<div
				v-else
				:class="[
					'rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center',
					variant === 'sm' ? 'w-8 h-8' : 'w-10 h-10',
				]"
			>
				<span class="text-primary-600 dark:text-primary-400 font-medium">
					{{ author.name?.charAt(0) }}
				</span>
			</div>
		</figure>
		<div>
			<p class="font-medium text-neutral-900 dark:text-white">
				{{ author.name }}
			</p>
			<p v-if="author.title" class="text-sm text-neutral-500">
				{{ author.title }}
			</p>
		</div>
	</div>

	<!-- Full Bio variant -->
	<div
		v-else-if="variant === 'full'"
		class="flex flex-col sm:flex-row gap-6 p-6 rounded-2xl bg-neutral-100 dark:bg-neutral-900"
	>
		<figure class="flex-shrink-0">
			<img
				v-if="author.avatar"
				:src="author.avatar"
				:alt="author.name"
				class="w-20 h-20 rounded-full object-cover"
			/>
			<div
				v-else
				class="w-20 h-20 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center"
			>
				<span
					class="text-primary-600 dark:text-primary-400 font-medium text-2xl"
				>
					{{ author.name?.charAt(0) }}
				</span>
			</div>
		</figure>
		<div class="flex-1">
			<p class="font-semibold text-lg text-neutral-900 dark:text-white">
				{{ author.name }}
			</p>
			<p v-if="author.title" class="text-sm text-neutral-500 mb-3">
				{{ author.title }}
			</p>
			<p v-if="author.bio" class="text-neutral-600 dark:text-neutral-400">
				{{ author.bio }}
			</p>

			<!-- Social Links -->
			<div v-if="hasSocialLinks" class="flex gap-2 mt-4">
				<UButton
					v-for="(url, platform) in author.social"
					:key="platform"
					:to="url"
					:icon="getSocialIcon(platform)"
					variant="ghost"
					color="neutral"
					size="sm"
					target="_blank"
					:aria-label="platform"
				/>
			</div>
		</div>
	</div>

	<!-- Card variant -->
	<div
		v-else-if="variant === 'card'"
		class="text-center p-6 rounded-2xl bg-neutral-100 dark:bg-neutral-900"
	>
		<figure class="mx-auto mb-4">
			<img
				v-if="author.avatar"
				:src="author.avatar"
				:alt="author.name"
				class="w-24 h-24 rounded-full object-cover mx-auto ring-4 ring-white dark:ring-neutral-800"
			/>
			<div
				v-else
				class="w-24 h-24 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center mx-auto"
			>
				<span
					class="text-primary-600 dark:text-primary-400 font-medium text-3xl"
				>
					{{ author.name?.charAt(0) }}
				</span>
			</div>
		</figure>
		<p class="font-semibold text-lg text-neutral-900 dark:text-white">
			{{ author.name }}
		</p>
		<p v-if="author.title" class="text-sm text-neutral-500 mt-1">
			{{ author.title }}
		</p>
		<p
			v-if="author.bio"
			class="text-sm text-neutral-600 dark:text-neutral-400 mt-3"
		>
			{{ author.bio }}
		</p>

		<!-- Social Links -->
		<div v-if="hasSocialLinks" class="flex justify-center gap-2 mt-4">
			<UButton
				v-for="(url, platform) in author.social"
				:key="platform"
				:to="url"
				:icon="getSocialIcon(platform)"
				variant="soft"
				color="neutral"
				size="sm"
				target="_blank"
				:aria-label="platform"
			/>
		</div>
	</div>
</template>

<script setup>
const props = defineProps({
	/** Author object { name, avatar?, title?, bio?, social?: { twitter?, linkedin?, github?, website? } } */
	author: {
		type: Object,
		default: () => ({ name: "Author Name", title: "Contributor" }),
	},
	/** Display variant */
	variant: {
		type: String,
		default: "inline",
		validator: (v) => ["inline", "sm", "full", "card"].includes(v),
	},
});

const hasSocialLinks = computed(() => {
	return props.author.social && Object.keys(props.author.social).length > 0;
});

const getSocialIcon = (platform) => {
	const icons = {
		twitter: "i-lucide-twitter",
		x: "i-lucide-twitter",
		linkedin: "i-lucide-linkedin",
		github: "i-lucide-github",
		website: "i-lucide-globe",
		instagram: "i-lucide-instagram",
		facebook: "i-lucide-facebook",
		youtube: "i-lucide-youtube",
		email: "i-lucide-mail",
	};
	return icons[platform.toLowerCase()] || "i-lucide-link";
};
</script>
