import { cn } from "@/lib/utils";
import { Textarea } from "../textarea";
import { Label } from "../label";
import { useId } from "react";

interface TextAreaInputProps extends React.ComponentProps<typeof Textarea> {
  label?: string;
  containerProps?: React.ComponentProps<"div">;
}

function TextAreaInput({
  className,
  label,
  containerProps,
  ...props
}: TextAreaInputProps) {
  const id = useId();
  const textareaId = props.id || id;

  return (
    <div
      {...containerProps}
      className={cn("w-full flex flex-col gap-2", containerProps?.className)}
    >
      {label && (
        <Label
          htmlFor={textareaId}
          className="text-muted-foreground font-inter font-medium text-base"
        >
          {label}
        </Label>
      )}
      <Textarea
        data-slot="textarea-input"
        className={cn(
          "py-3.5 px-4",
          "font-inter text-[18px]/[28px] font-semibold text-foreground",
          "placeholder:text-muted-foreground placeholder:text-[18px]/[28px] font-medium",
          "border-2 border-primary/30 rounded-2xl",
          className
        )}
        id={textareaId}
        {...props}
      />
      {props["aria-invalid"] && (
        <p className="text-destructive font-inter font-medium text-xs">
          {props["aria-errormessage"]}
        </p>
      )}
    </div>
  );
}

export { TextAreaInput };