import React from "react";
import clsx from "clsx";

export const Textarea = React.forwardRef<
  HTMLTextAreaElement,
  React.TextareaHTMLAttributes<HTMLTextAreaElement> & { masked?: boolean }
>(({ className, masked = false, style, ...props }, ref) => (
  <textarea
    ref={ref}
    className={clsx(
      "w-full rounded-xl border border-slate-300 bg-white px-3 py-3 text-sm text-slate-900 focus:border-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-200",
      className
    )}
    style={{
      ...(masked ? ({ WebkitTextSecurity: "disc" } as React.CSSProperties) : {}),
      ...style,
    }}
    {...props}
  />
));

Textarea.displayName = "Textarea";
