import { ReactNode } from 'react';
import { InlineFormActions } from './InlineFormActions';

interface InlineAddItemProps {
  value: string;
  onChange: (value: string) => void;
  onSubmit: () => void;
  onCancel: () => void;
  isPending: boolean;
  placeholder?: string;
  rows?: number;
  extra?: ReactNode;
  submitColorClass?: string;
  className?: string;
}

export function InlineAddItem({
  value,
  onChange,
  onSubmit,
  onCancel,
  isPending,
  placeholder,
  rows = 2,
  extra,
  submitColorClass,
  className = '',
}: InlineAddItemProps) {
  return (
    <div className={`rounded-lg border border-border bg-card p-2 shadow-sm ${className}`}>
      <textarea
        autoFocus
        value={value}
        onChange={(e) => onChange(e.target.value)}
        onKeyDown={(e) => {
          if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            onSubmit();
          } else if (e.key === 'Escape') {
            onCancel();
          }
        }}
        placeholder={placeholder}
        className="w-full resize-none rounded border-0 bg-transparent p-1 text-sm text-foreground placeholder:text-muted focus:outline-none focus:ring-0"
        rows={rows}
        disabled={isPending}
      />
      {extra}
      <InlineFormActions
        onCancel={onCancel}
        onSubmit={onSubmit}
        isPending={isPending}
        disabled={!value.trim()}
        submitColorClass={submitColorClass}
        className="mt-1"
      />
    </div>
  );
}