import { adminComponentStyles } from "./design-system";

interface AdminTextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "label"> {
  label?: React.ReactNode;
  error?: string;
  helperText?: React.ReactNode;
  showCharacterCount?: boolean;
  maxLength?: number;
}

export default function AdminTextarea({
  label,
  error,
  helperText,
  showCharacterCount = false,
  maxLength,
  className = "",
  id,
  value,
  ...props
}: AdminTextareaProps) {
  const inputId = id || `textarea-${Math.random().toString(36).substr(2, 9)}`;
  const currentLength = typeof value === "string" ? value.length : 0;

  return (
    <div className="w-full">
      {label && (
        <label
          htmlFor={inputId}
          className="mb-1.5 block text-sm font-medium text-slate-300"
        >
          {label}
          {props.required && <span className="ml-1 text-rose-400">*</span>}
        </label>
      )}
      <textarea
        id={inputId}
        maxLength={maxLength}
        value={value}
        className={`${adminComponentStyles.input.base} ${
          error ? adminComponentStyles.input.error : ""
        } ${props.disabled ? adminComponentStyles.input.disabled : ""} ${className}`}
        {...props}
      />
      <div className="mt-1 flex items-center justify-between gap-2">
        {error ? (
          <p className="text-xs text-rose-400">{error}</p>
        ) : helperText ? (
          <p className="text-xs text-slate-500">{helperText}</p>
        ) : (
          <span />
        )}
        {showCharacterCount && maxLength && (
          <p
            className={`text-xs ml-auto ${
              currentLength > maxLength * 0.9
                ? "text-amber-400"
                : "text-slate-500"
            }`}
          >
            {currentLength}/{maxLength}
          </p>
        )}
      </div>
    </div>
  );
}
