<script lang="ts" module>
	export type InputFieldStyle = 'ghost';
</script>

<script lang="ts">
	import type { DaisyColor, DaisySize } from '$lib/types';
	import clsx from 'clsx';
	import type { Snippet } from 'svelte';
	import type { HTMLInputTypeAttribute, SvelteHTMLElements } from 'svelte/elements';
	import { twMerge } from 'tailwind-merge';

	type Props = {
		block?: boolean;
		color?: DaisyColor;
		error?: string | Snippet;
		fade?: boolean;
		start?: string | Snippet;
		end?: string | Snippet;
		label?: string | Snippet;
		size?: DaisySize;
		style?: InputFieldStyle;
		type?: Extract<
			HTMLInputTypeAttribute,
			'email' | 'password' | 'search' | 'tel' | 'text' | 'url'
		>;
	} & Omit<SvelteHTMLElements['input'], 'type' | 'size'>;

	let {
		block,
		class: className,
		color,
		start,
		end,
		size = 'md',
		style,
		...props
	}: Props = $props();
</script>

<div
	class="input flex items-center gap-2 transition-[width] delay-150 duration-300 ease-in-out"
	class:w-full={block}
	class:input-primary={color === 'primary'}
	class:input-secondary={color === 'secondary'}
	class:input-accent={color === 'accent'}
	class:input-neutral={color === 'neutral'}
	class:input-info={color === 'info'}
	class:input-success={color === 'success'}
	class:input-warning={color === 'warning'}
	class:input-error={color === 'error'}
	class:input-ghost={style === 'ghost'}
	class:input-xs={size === 'xs'}
	class:input-sm={size === 'sm'}
	class:input-md={size === 'md'}
	class:input-lg={size === 'lg'}
	class:input-xl={size === 'xl'}
>
	{#if typeof start === 'string'}
		{start}
	{:else}
		{@render start?.()}
	{/if}
	<input {...props} class={twMerge('grow', clsx(className))} />
	{#if typeof end === 'string'}
		{end}
	{:else}
		{@render end?.()}
	{/if}
</div>