import { JSX } from "preact";

interface TextareaProps
  extends JSX.TextareaHTMLAttributes<HTMLTextAreaElement> {
  error?: boolean;
  label?: string;
}

export default function Textarea({
  error = false,
  label,
  className = "",
  ...props
}: TextareaProps) {
  const textareaClasses = `w-full block box-border rounded border ${
    error ? "border-red-600" : "border-gray-300 dark:border-gray-600"
  } text-sm outline-none h-full p-1.5 resize-none dark:bg-gray-800 dark:text-gray-100 ${className}`;

  if (label) {
    return (
      <div className="mb-2">
        <label className="block mb-1 text-sm">{label}</label>
        <textarea className={textareaClasses} {...props} />
      </div>
    );
  }

  return <textarea className={textareaClasses} {...props} />;
}