import * as React from 'react'
import { cn } from '../lib/cn'

export interface TextareaProps
  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
  error?: string
}

export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
  ({ className, error, ...props }, ref) => (
    <div className="flex flex-col gap-2">
      <textarea
        ref={ref}
        aria-invalid={error ? true : undefined}
        className={cn(
          'min-h-16 w-full rounded border bg-surface p-2 text-body-1 text-ink placeholder:text-ink-faint',
          error ? 'border-danger' : 'border-control-border',
          'outline-none focus:ring-2 focus:ring-focus-ring',
          'disabled:opacity-50',
          className,
        )}
        {...props}
      />
      {error ? (
        <p role="alert" className="text-danger text-body-2">
          {error}
        </p>
      ) : null}
    </div>
  ),
)
Textarea.displayName = 'Textarea'