<!--
    Component: Input
    Provides styled input component with all the shadcn input props
-->
<script lang="ts">
import { Input } from '$shared/shadcn/ui/input';
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import type { ComponentProps } from 'svelte';

type Props = ComponentProps<typeof Input> & {
    /**
     * Current search value (bindable)
     */
    value: string;
    /**
     * Additional CSS classes for the container
     */
    class?: string;
};

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

<Input
    bind:value={value}
    class={cn(
        'h-12 sm:h-14 md:h-16 w-full text-sm sm:text-base',
        'backdrop-blur-md bg-white/80',
        'border border-gray-300/50',
        'shadow-[0_1px_3px_rgba(0,0,0,0.04)]',
        'focus-visible:border-gray-400/60',
        'focus-visible:outline-none',
        'focus-visible:ring-1',
        'focus-visible:ring-gray-400/30',
        'focus-visible:bg-white/90',
        'hover:bg-white/90',
        'hover:border-gray-400/60',
        'text-gray-900',
        'placeholder:text-gray-400',
        'placeholder:font-mono',
        'placeholder:text-xs sm:placeholder:text-sm',
        'placeholder:tracking-wide',
        'pl-4 sm:pl-6 pr-4 sm:pr-6',
        'rounded-xl',
        'transition-all duration-200',
        'font-medium',
        className,
    )}
    {...rest}
/>
