<!--
    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;

    variant?: 'default' | 'ghost';
};

let {
    value = $bindable(''),
    class: className,
    variant = 'default',
    ...rest
}: Props = $props();

const isGhost = $derived(variant === 'ghost');
</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',
        isGhost ? 'bg-transparent' : 'bg-background-80',
        'border border-border-muted',
        isGhost ? 'border-transparent' : 'border-border-muted',
        isGhost ? 'shadow-none' : 'shadow-[0_1px_3px_rgba(0,0,0,0.04)]',
        'focus-visible:border-border-soft',
        'focus-visible:outline-none',
        'focus-visible:ring-1',
        'focus-visible:ring-border-muted/30',
        'focus-visible:bg-background-95',
        'hover:bg-background-95',
        'hover:border-border-soft',
        'text-foreground',
        'placeholder:text-text-muted',
        '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}
/>
