import styles from './Textarea.module.css'
import { forwardRef, type TextareaHTMLAttributes } from 'react'

type ResizeProp = 'vertical' | 'horizontal' | 'none' | 'both'

interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
  resize?: ResizeProp
}

const resizeClassMap: Record<ResizeProp, string> = {
  vertical: styles.resizeVertical,
  horizontal: styles.resizeHorizontal,
  none: styles.resizeNone,
  both: styles.resizeBoth,
}

export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
  ({ resize = 'vertical', className, rows = 3, ...rest }, ref) => {
    const resizeClass = resizeClassMap[resize]
    return (
      <textarea
        ref={ref}
        rows={rows}
        className={`${styles.textarea} ${resizeClass} ${className ?? ''}`}
        {...rest}
      />
    )
  },
)

Textarea.displayName = 'Textarea'
