import { Skeleton } from "./ui/skeleton";

export default function AppTextArea({
  inputValue,
  inputOnChange,
  inputPlaceholder,
  inputDir,
  disabled,
  inputTitle,
  loading,
}: {
  inputValue: string;
  inputOnChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
  inputPlaceholder: string;
  inputDir?: string;
  disabled?: boolean;
  inputTitle: string;
  loading?: boolean;
}) {
  return (
    <div className="w-full flex flex-col gap-2">
      <p className={"text-R14 text-foreground dark:text-gray-200"}>
        {inputTitle}
      </p>
      {loading ? (
        <Skeleton className="w-full h-[120px]" />
      ) : (
        <textarea
          dir={inputDir || "rtl"}
          placeholder={inputPlaceholder}
          value={inputValue}
          onChange={inputOnChange}
          disabled={disabled}
          className="flex h-[120px] w-full rounded-[12px] border border-input bg-inputBg px-3 py-2 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-inputPlaceholder focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm resize-none dark:bg-gray-800 dark:border-gray-600 dark:text-gray-200 dark:placeholder:text-gray-400"
        />
      )}
    </div>
  );
}