src/theme/form/InputTextarea.tsx

import cn from "@utils/classnames";
import { type ChangeEvent, forwardRef } from "react";

interface InputTextareaProps {
  label: string;
  placeholder?: string;
  error?: string;
  required?: boolean;
  className?: string;
  id?: string;
  rows?: number;
  value?: string;
  onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
  hideLabel?: boolean;
}

const InputTextarea = forwardRef<HTMLTextAreaElement, InputTextareaProps>(
  (
    {
      label,
      placeholder,
      error,
      required,
      className = "",
      id,
      rows = 4,
      hideLabel = false,
      ...props
    },
    ref
  ) => {
    return (
      <div className={cn("flex flex-col gap-2", className)}>
        {!hideLabel && (
          <label
            htmlFor={id}
            className="text-sm font-medium text-gray-900 dark:text-gray-100"
          >
            {label}
            {required && (
              <span className="ml-1 text-blue-500 dark:text-blue-400">*</span>
            )}
          </label>
        )}
        <textarea
          ref={ref}
          id={id}
          rows={rows}
          placeholder={placeholder}
          className={cn(
            "resize-vertical w-full rounded-md border px-3 py-2 text-sm transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-none",
            "bg-white text-gray-900 dark:bg-gray-800 dark:text-gray-100",
            "focus:ring-offset-white dark:focus:ring-offset-gray-900",
            error
              ? "border-red-300 focus:border-red-500 focus:ring-red-500 dark:border-red-700 dark:focus:border-red-600 dark:focus:ring-red-600"
              : "border-gray-300 focus:border-yellow-500 focus:ring-yellow-500 dark:border-gray-600 dark:focus:border-yellow-400 dark:focus:ring-yellow-400",
            "placeholder:text-gray-400 dark:placeholder:text-gray-500"
          )}
          {...props}
        />
        {error && (
          <span className="text-sm text-red-600 dark:text-red-400">
            {error}
          </span>
        )}
      </div>
    );
  }
);

InputTextarea.displayName = "InputTextarea";

export default InputTextarea;