<!--
    Component: SearchInput
    Convenience wrapper around Input that pre-fills the leftIcon slot with
    a Search icon sized to match the current `size` prop.

    The consumer can still override rightIcon, add a clear button, etc.
    They cannot pass leftIcon — it's owned by this wrapper.
-->
<script lang="ts">
import { Input } from '$shared/ui/Input';
import { inputIconSize } from '$shared/ui/Input/types';
import SearchIcon from '@lucide/svelte/icons/search';
import type { ComponentProps } from 'svelte';

type Props = Exclude<ComponentProps<typeof Input>, 'leftIcon'>;

let {
    value = $bindable(''),
    ...rest
}: Props = $props();
</script>

<Input bind:value {...rest}>
    {#snippet leftIcon(size)}
        <SearchIcon size={inputIconSize[size]} />
    {/snippet}
</Input>
