import React from 'react';
import { inject } from '../lib/inject';

const css = `
.nbl-textarea{font-family:var(--font-sans);font-size:var(--text-base);color:var(--text-strong);background:var(--surface-card);border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:8px 12px;width:100%;min-height:80px;outline:none;resize:vertical;line-height:var(--leading-normal);transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);}
.nbl-textarea::placeholder{color:var(--text-faint);}
.nbl-textarea:hover:not(:disabled):not(:focus){border-color:var(--steel-400);}
.nbl-textarea:focus{border-color:var(--border-focus);box-shadow:var(--shadow-focus);}
.nbl-textarea:disabled{opacity:.5;cursor:not-allowed;background:var(--surface-sunken);}
.nbl-textarea--error{border-color:var(--red-500) !important;}
.nbl-textarea--error:focus{box-shadow:0 0 0 3px rgba(192,57,43,0.22) !important;}
`;

inject('nbl-textarea-css', css);

export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
  label?: string;
  hint?: string;
  error?: string;
  required?: boolean;
}

export function Textarea({
  label,
  hint,
  error,
  required,
  className = '',
  id,
  ...rest
}: TextareaProps) {
  inject('nbl-textarea-css', css);
  const textareaId = id ?? (label ? `nbl-textarea-${label.toLowerCase().replace(/\s+/g, '-')}` : undefined);
  const cls = ['nbl-textarea', error ? 'nbl-textarea--error' : '', className].filter(Boolean).join(' ');

  return (
    <div className="nbl-field">
      {label && (
        <label className={`nbl-label${required ? ' nbl-label--required' : ''}`} htmlFor={textareaId}>
          {label}
        </label>
      )}
      <textarea id={textareaId} className={cls} required={required} {...rest} />
      {(error || hint) && (
        <span className={`nbl-hint${error ? ' nbl-hint--error' : ''}`}>{error ?? hint}</span>
      )}
    </div>
  );
}