"use client";

import type { TextAreaProps as AriaTextAreaProps, TextFieldProps as AriaTextFieldProps } from "react-aria-components";
import { TextArea as AriaTextArea, TextField as AriaTextField } from "react-aria-components";
import { HintText } from '../input/hint-text';
import { Label } from '../input/label';
import { cx } from '../../../utils/cx';

export interface TextareaProps extends AriaTextFieldProps {
    label?: string;
    hint?: string;
    placeholder?: string;
    rows?: number;
    className?: string;
}

export const TextArea = ({
    label,
    hint,
    placeholder,
    rows = 4,
    isInvalid,
    isDisabled,
    isRequired,
    className,
    ...props
}: TextareaProps) => {
    return (
        <AriaTextField
            {...({ isInvalid, isDisabled, isRequired } as AriaTextFieldProps)}
            className="flex flex-col gap-1.5"
        >
            {label && <Label>{label}</Label>}
            <AriaTextArea
                {...(props as AriaTextAreaProps)}
                rows={rows}
                placeholder={placeholder}
                className={cx(
                    "w-full rounded-sm bg-white px-3 py-2.5 text-base font-body text-fg-primary ring-1 ring-secondary ring-inset placeholder:text-secondary outline-none transition-shadow duration-100 ease-linear",
                    "focus:ring-2 focus:ring-focus-ring",
                    isDisabled && "cursor-not-allowed bg-primary text-secondary ring-secondary",
                    isInvalid && "ring-error_subtle focus:ring-2 focus:ring-error",
                    className,
                )}
            />
            {hint && <HintText>{hint}</HintText>}
        </AriaTextField>
    );
};

import { registerThemeVariant } from '../../../lib/component-registry';
registerThemeVariant('textarea', 'aman', TextArea);
