<script lang="ts">
	import { cn } from '$lib/utils';

	interface Props {
		value?: string;
		placeholder?: string;
		rows?: number;
		disabled?: boolean;
		class?: string;
		onchange?: (e: Event) => void;
		oninput?: (e: Event) => void;
		[key: string]: unknown;
	}

	let {
		value = $bindable(''),
		placeholder = '',
		rows = 3,
		disabled = false,
		class: className = '',
		onchange,
		oninput,
		...rest
	}: Props = $props();
</script>

<textarea
	bind:value
	{placeholder}
	{rows}
	{disabled}
	class={cn(
		'flex w-full rounded-lg border border-(--color-border) bg-(--color-surface-2) px-3 py-2 text-sm text-(--color-text) placeholder-zinc-500 resize-none transition-colors',
		'focus:outline-none focus:border-(--color-brand)',
		'disabled:cursor-not-allowed disabled:opacity-50',
		className
	)}
	{onchange}
	{oninput}
	{...rest}
></textarea>
