import type { TextareaHTMLAttributes } from "react";

const textareaClassName =
  "text-m-regular h-[101px] w-full resize-none rounded-lg border border-neutral-40 bg-neutral-10 px-[22px] py-2 text-neutral-100 placeholder:text-neutral-70 outline-none focus:border-primary-500 disabled:cursor-not-allowed disabled:opacity-60";

export type FormTextareaProps = Omit<
  TextareaHTMLAttributes<HTMLTextAreaElement>,
  "id" | "value" | "onChange" | "className"
> & {
  id: string;
  label: string;
  value: string;
  onChange: (value: string) => void;
};

export function FormTextarea({
  id,
  label,
  value,
  onChange,
  disabled,
  ...textareaProps
}: FormTextareaProps) {
  return (
    <div className="flex flex-col gap-2">
      <label htmlFor={id} className="text-m-medium text-neutral-100">
        {label}
      </label>
      <textarea
        id={id}
        value={value}
        onChange={(event) => onChange(event.target.value)}
        disabled={disabled}
        className={textareaClassName}
        {...textareaProps}
      />
    </div>
  );
}