import { twJoin } from "tailwind-merge";
import React from "react";

import { Input, type InputProps } from "../input/Input";
import { useInputStyles } from "../input/Input.styles";

export const Textarea = (
  props: Omit<InputProps, "multiline" | "leftIcon" | "rightIcon" | "errorText">
) => {
  const classes = useInputStyles({
    height: props.height ?? "32",
    variant: props.variant ?? "outlined",
  });

  return (
    <Input
      multiline
      InputProps={{
        classes: {
          ...classes,
          root: twJoin(classes.root, "p-0"),
          input: twJoin(
            ...classes.input
              .split(" ")
              .filter((className) => !/(whitespace|overflow)/.test(className))
          ),
        },
      }}
      {...props}
    />
  );
};
