"use client";

/**
 * Textarea Field (NEW)
 *
 * Based on TextInputField pattern but uses a textarea element
 * for multi-line text input
 */

import {
	ANIMATION_CLASSES,
	getStaggerStyle,
	STAGGER_PRESETS,
} from "../animations";
import { cx } from "../lib/utils";
import { OnboardingLabel } from "../primitives/onboarding-label";
import type { TextareaFieldProps } from "../types/fields";

export function TextareaField({
	id,
	label,
	placeholder,
	description,
	required = false,
	value,
	onChange,
	onBlur,
	error,
	touched = false,
	rows = 4,
	maxLength,
	animationIndex = 0,
	disabled = false,
}: TextareaFieldProps) {
	return (
		<div
			className={ANIMATION_CLASSES.fadeInUp}
			style={getStaggerStyle(
				animationIndex,
				STAGGER_PRESETS.formFields.baseDelay,
				STAGGER_PRESETS.formFields.increment,
				STAGGER_PRESETS.formFields.duration,
			)}
		>
			<OnboardingLabel
				className="mb-2 block text-base font-medium text-foreground"
				htmlFor={id}
			>
				{label}
				{required && <span className="ml-1 text-destructive">*</span>}
			</OnboardingLabel>

			{description && (
				<p className="mb-2 text-sm text-muted-foreground">{description}</p>
			)}

			<textarea
				id={id}
				placeholder={placeholder}
				value={value}
				onChange={(e) => onChange(e.target.value)}
				onBlur={onBlur}
				rows={rows}
				maxLength={maxLength}
				disabled={disabled}
				aria-invalid={touched && !!error}
				aria-describedby={error ? `${id}-error` : undefined}
				className={cx(
					"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background",
					"placeholder:text-muted-foreground",
					"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
					"disabled:cursor-not-allowed disabled:opacity-50",
					touched && error && "border-destructive",
				)}
			/>

			<div className="mt-1.5 flex items-center justify-between">
				{touched && error ? (
					<p id={`${id}-error`} className="text-sm text-destructive">
						{error}
					</p>
				) : (
					<span />
				)}
				{maxLength && (
					<span className="text-xs text-muted-foreground">
						{value.length}/{maxLength}
					</span>
				)}
			</div>
		</div>
	);
}