<script lang="ts">
	let {
		placeholder = 'Search...',
		value = $bindable('')
	}: {
		placeholder?: string;
		value?: string;
	} = $props();
</script>

<div class="search-bar">
	<div class="input-with-icon">
		<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
			<circle cx="11" cy="11" r="8"/>
			<path d="m21 21-4.3-4.3"/>
		</svg>
		<input
			class="input"
			type="text"
			{placeholder}
			bind:value
		/>
	</div>
</div>

<style>
	.search-bar {
		margin-bottom: var(--section-gap, 24px);
	}

	.input-with-icon {
		position: relative;
	}

	.input-with-icon svg {
		position: absolute;
		left: 12px;
		top: 50%;
		transform: translateY(-50%);
		width: 16px;
		height: 16px;
		color: var(--text-3);
		pointer-events: none;
	}

	.input {
		width: 100%;
		padding: 10px 14px 10px 38px;
		border-radius: var(--radius-sm, 8px);
		background: var(--surface-secondary);
		border: 1px solid var(--border);
		color: var(--text-1);
		font-size: var(--text-base);
		font-family: var(--font);
		outline: none;
		transition: border-color var(--transition, 180ms ease);
	}

	.input:focus {
		border-color: var(--accent);
	}

	.input::placeholder {
		color: var(--text-4);
	}
</style>
