const spanClasses: Record<number, string> = {
  1: "md:col-span-1",
  2: "md:col-span-2",
};

const fieldClass = (isError?: boolean) =>
  `w-full rounded-lg p-3 text-sm border outline-none text-title placeholder:text-body md:text-base resize-none md:min-h-35 ${isError ? "border-red-500 bg-red-50/40" : "border-border focus:border-primary-600"}`;

export default function TextareaInput({
  label,
  name,
  value,
  onChange,
  placeholder,
  isDisable,
  isError,
  textFoot,
  colSpan = 1,
  rows = 5,
}: {
  label?: string;
  name: string;
  value?: string;
  onChange: (value: string) => void;
  placeholder?: string;
  isDisable?: boolean;
  isError?: boolean;
  textFoot?: string;
  colSpan?: number;
  rows?: number;
}) {
  return (
    <div className={`flex flex-col gap-1 ${spanClasses[colSpan] || "md:col-span-1"}`}>
      {label && (
        <label htmlFor={name} className="text-sm text-subtitle md:text-base">
          {label}
        </label>
      )}

      <textarea id={name} name={name} rows={rows} value={value || ""} onChange={(evt) => onChange(evt?.target?.value)} placeholder={placeholder} disabled={isDisable} className={fieldClass(isError)} />

      {textFoot && <p className="text-[13px] text-red-500">{textFoot}</p>}
    </div>
  );
}