<script lang="ts">
	import { t } from 'svelte-i18n';

	interface Props {
		iconType: string;
		iconValue: string;
		onchange?: (type: string, value: string) => void;
	}

	let { iconType = $bindable('lucide'), iconValue = $bindable(''), onchange }: Props = $props();

	function handleTypeChange(e: Event) {
		const target = e.target as HTMLSelectElement;
		iconType = target.value;
		iconValue = '';
		onchange?.(iconType, iconValue);
	}

	function handleValueChange(e: Event) {
		const target = e.target as HTMLInputElement;
		iconValue = target.value;
		onchange?.(iconType, iconValue);
	}
</script>

<div class="space-y-2">
	<label class="block text-sm font-medium text-card-foreground">{$t('app.icon')}</label>

	<div class="flex gap-2">
		<select
			value={iconType}
			onchange={handleTypeChange}
			class="rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
		>
			<option value="lucide">{$t('app.icon_lucide')}</option>
			<option value="simple">{$t('app.icon_simple')}</option>
			<option value="url">{$t('app.icon_url')}</option>
			<option value="emoji">{$t('app.icon_emoji')}</option>
		</select>

		<input
			type="text"
			value={iconValue}
			oninput={handleValueChange}
			placeholder={iconType === 'lucide'
				? $t('app.icon_lucide_placeholder')
				: iconType === 'simple'
					? $t('app.icon_simple_placeholder')
					: iconType === 'url'
						? $t('app.icon_url_placeholder')
						: $t('app.icon_emoji_placeholder')}
			class="flex-1 rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
		/>
	</div>

	{#if iconType === 'emoji' && iconValue}
		<div class="text-2xl">{iconValue}</div>
	{:else if iconType === 'url' && iconValue}
		<img src={iconValue} alt={$t('app.icon_preview')} class="h-8 w-8 rounded object-contain" />
	{:else if iconType === 'simple' && iconValue}
		<img
			src="https://cdn.simpleicons.org/{iconValue.toLowerCase()}"
			alt="{iconValue} icon"
			class="h-8 w-8"
		/>
	{/if}
</div>
