<script>
	// A single click-to-upload slot: a light bordered placeholder when empty,
	// the chosen image (cover) when filled. Layout (size / grid placement) is
	// supplied by the parent via `class` and `style` so the same tile works in
	// both the moodboard and the SNS feed.
	let {
		label = null,
		/** 빈 타일 중앙에 표시할 안내 문장 */
		prompt = null,
		showLabel = true,
		class: klass = '',
		style = '',
		file = $bindable(null)
	} = $props();

	let preview = $state(null);

	function pick(event) {
		const picked = event.currentTarget.files?.[0];
		if (!picked) return;
		file = picked;
	}

	// 부모에서 File을 주입할 때(Dev seed 등) 미리보기 동기화
	$effect(() => {
		if (!file) {
			preview = null;
			return;
		}

		const url = URL.createObjectURL(file);
		preview = url;
		return () => URL.revokeObjectURL(url);
	});
</script>

<label
	class={[
		'group relative flex cursor-pointer items-center justify-center overflow-hidden bg-track transition-colors',
		!preview && 'border border-line hover:border-line-strong',
		klass
	]}
	{style}
>
	<input
		type="file"
		accept="image/*"
		class="sr-only"
		aria-label={prompt ?? (label ? `Add a ${label} image` : 'Add an image')}
		onchange={pick}
	/>

	{#if preview}
		<img src={preview} alt={label ?? ''} class="h-full w-full object-cover" />
		<div class="absolute inset-0 bg-linear-to-t from-ink/45 to-transparent"></div>
		{#if label && showLabel}
			<span class="absolute bottom-3 left-4 text-sm tracking-[0.15em] text-surface uppercase"
				>{label}</span
			>
		{/if}
		<span
			class="absolute top-3 right-3 rounded-full bg-ink/40 px-2.5 py-1 text-xs text-surface opacity-0 backdrop-blur-sm transition-opacity group-hover:opacity-100"
		>
			Change
		</span>
	{:else}
		<div
			class="flex flex-col items-center gap-3 px-4 text-center text-subtle transition-transform group-hover:scale-105"
		>
			<span
				class="flex size-10 shrink-0 items-center justify-center rounded-full border border-current text-xl leading-none"
				aria-hidden="true">+</span
			>
			{#if prompt}
				<span class="max-w-[14rem] text-sm leading-snug text-muted">{prompt}</span>
			{:else if label && showLabel}
				<span class="text-sm tracking-[0.15em] uppercase">{label}</span>
			{/if}
		</div>
	{/if}
</label>
