"use client"
 
import * as React from "react"
 
import { useAutosizeTextArea } from "@/hooks/use-autosize-textarea"
 
export function Component() {
  const textAreaRef = React.useRef<HTMLTextAreaElement>(null)
  const [value, setValue] = React.useState("")
 
  // Resize textarea when value changes
  useAutosizeTextArea({
    ref: textAreaRef,
    maxHeight: 200, // Max height of 200px
    borderWidth: 1, // Account for 1px border
    dependencies: [value], // Re-run effect when value changes
  })
 
  return (
    <textarea
      ref={textAreaRef}
      value={value}
      onChange={(e) => setValue(e.target.value)}
      placeholder="Type here..."
      style={{ borderWidth: "1px" }}
    />
  )
}