import type { TextareaHTMLAttributes } from "react";
import { forwardRef } from "react";

interface Props extends TextareaHTMLAttributes<HTMLTextAreaElement> {
  label?: string;
  error?: string;
}

const Textarea = forwardRef<HTMLTextAreaElement, Props>(function Textarea(
  { label, error, className = "", id, ...rest },
  ref,
) {
  const fieldId = id ?? rest.name;
  return (
    <label className="block" htmlFor={fieldId}>
      {label && (
        <span className="mb-1.5 block text-sm font-medium text-brand-text/90">
          {label}
        </span>
      )}
      <textarea
        {...rest}
        ref={ref}
        id={fieldId}
        className={[
          "w-full rounded-xl px-3.5 py-2.5 resize-y",
          "bg-brand-bgLight/40 border border-brand-lines/25 text-brand-text",
          "placeholder:text-brand-text/40",
          "focus:outline-none focus:border-brand-accent focus:ring-2 focus:ring-brand-accent/30",
          "disabled:opacity-60 disabled:cursor-not-allowed",
          error ? "border-red-500/60" : "",
          className,
        ].join(" ")}
      />
      {error && <span className="mt-1 block text-xs text-red-400">{error}</span>}
    </label>
  );
});

export default Textarea;
