ldc-ovoteam/resources/ts/front/Components/Base/Inputs/SimpleTextarea.tsx

// * Packages
import { usePage } from "@inertiajs/react";
// * Components shadcn
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
// * Other
import InputError from "@/front/Components/Base/InputError";
import trans from "@/hooks/use-translations";
import { cn } from "@/lib/utils";

type SimpleTextareaProps = {
  className?: string;
  name: string;
  label: string;
  value?: string;
  id?: string;
  placeholder?: string;
  required?: boolean;
  disabled?: boolean;
  parentErrors?: Record<string, string> | null;
  // eslint-disable-next-line no-unused-vars
  setData: (name: string, value: string) => void;
};

export default function SimpleTextarea({
  className,
  name,
  label,
  value = "",
  id = name,
  placeholder = "uwil-backend::back.enter_text_here",
  required = true,
  disabled = false,
  parentErrors = null,
  setData,
}: SimpleTextareaProps) {
  const { errors } = usePage().props;
  const localErrors = parentErrors ?? errors;

  return (
    <div
      className={cn(
        "flex flex-col w-full justify-between items-start gap-1.5",
        className,
      )}
    >
      <Label htmlFor={id} className="flex items-center gap-1.5">
        {label}
        {required && " *"}
      </Label>
      <div className="flex w-full">
        <Textarea
          id={id}
          name={name}
          placeholder={trans(placeholder)}
          defaultValue={value}
          onChange={(e) => {
            setData(name, e.target.value);
          }}
          required={required}
          disabled={disabled}
          className={cn("w-full text-sm", {
            "border-destructive/50": localErrors[name],
          })}
        />
      </div>
      <InputError message={localErrors[name]} />
    </div>
  );
}