<!--
    Component: Input
    Provides styled input component with all the shadcn input props
-->
<script lang="ts" module>
import { Input as BaseInput } from '$shared/shadcn/ui/input';
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import {
    type VariantProps,
    tv,
} from 'tailwind-variants';

export const inputVariants = tv({
    base: [
        'w-full backdrop-blur-md border font-medium transition-all duration-200',
        '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:tracking-wide',
    ],
    variants: {
        variant: {
            default: 'bg-background-80 border-border-muted shadow-[0_1px_3px_rgba(0,0,0,0.04)]',
            ghost: 'bg-transparent border-transparent shadow-none',
        },
        size: {
            sm: [
                'h-9 sm:h-10 md:h-11 rounded-lg',
                'px-3 sm:px-3.5 md:px-4',
                'text-xs sm:text-sm md:text-base',
                'placeholder:text-xs sm:placeholder:text-sm md:placeholder:text-base',
            ],
            md: [
                'h-10 sm:h-12 md:h-14 rounded-xl',
                'px-3.5 sm:px-4 md:px-5',
                'text-sm sm:text-base md:text-lg',
                'placeholder:text-xs sm:placeholder:text-sm md:placeholder:text-base',
            ],
            lg: [
                'h-12 sm:h-14 md:h-16 rounded-2xl',
                'px-4 sm:px-5 md:px-6',
                'text-sm sm:text-base md:text-lg',
                'placeholder:text-xs sm:placeholder:text-sm md:placeholder:text-base',
            ],
        },
    },
    defaultVariants: {
        variant: 'default',
        size: 'lg',
    },
});

type InputVariant = VariantProps<typeof inputVariants>['variant'];
type InputSize = VariantProps<typeof inputVariants>['size'];

export type InputProps = {
    /**
     * Current search value (bindable)
     */
    value?: string;
    /**
     * Additional CSS classes for the container
     */
    class?: string;
    /**
     * Visual style variant
     */
    variant?: InputVariant;
    /**
     * Size variant
     */
    size?: InputSize;
    [key: string]: any;
};
</script>

<script lang="ts">
let {
    value = $bindable(''),
    class: className,
    variant = 'default',
    size = 'lg',
    ...rest
}: InputProps = $props();
</script>

<BaseInput
    bind:value={value}
    class={cn(inputVariants({ variant, size }), className)}
    {...rest}
/>
