import { ReactNode } from 'react';

interface InlineEditorProps {
  value: string;
  onChange: (value: string) => void;
  onSave: () => void;
  onCancel: () => void;
  isPending: boolean;
  placeholder?: string;
  rows?: number;
  submitLabel?: string;
  footer?: ReactNode;
}

export function InlineEditor({
  value,
  onChange,
  onSave,
  onCancel,
  isPending,
  placeholder,
  rows = 2,
  submitLabel = 'Enregistrer',
  footer,
}: InlineEditorProps) {
  return (
    <div className="space-y-2">
      <textarea
        autoFocus
        value={value}
        onChange={(e) => onChange(e.target.value)}
        onKeyDown={(e) => {
          if (e.key === 'Enter' && !e.shiftKey && !e.ctrlKey && !e.metaKey) {
            e.preventDefault();
            onSave();
          } else if (e.key === 'Escape') {
            onCancel();
          }
        }}
        className="w-full resize-none rounded border-0 bg-transparent p-0 text-sm text-foreground focus:outline-none focus:ring-0"
        rows={rows}
        disabled={isPending}
        placeholder={placeholder}
      />
      {footer}
      {!footer && (
        <div className="flex justify-end gap-2">
          <button
            type="button"
            className="rounded px-2 py-1 text-xs text-muted hover:bg-card-hover"
            onClick={onCancel}
            disabled={isPending}
          >
            Annuler
          </button>
          <button
            type="button"
            className="rounded px-2 py-1 text-xs font-medium text-primary hover:bg-primary/10"
            onClick={onSave}
            disabled={isPending || !value.trim()}
          >
            {submitLabel}
          </button>
        </div>
      )}
    </div>
  );
}