import React, { useCallback } from 'react';
import { CellImageEdit } from '@wix/patterns-fields';
import type { CellEditProps } from '../../types';

export const ImageEdit: React.FC<CellEditProps<string | null>> = ({
  value,
  onChange,
  onCommit,
  onCancel,
  onStartEdit,
  inputRef,
}) => {
  const handleChange = useCallback(
    (uri: string | null) => onChange(uri),
    [onChange],
  );

  return (
    <CellImageEdit
      value={value}
      onChange={handleChange}
      onCommit={onCommit}
      onCancel={onCancel}
      onStartEdit={onStartEdit}
      inputRef={inputRef}
      dataHook="image-edit"
    />
  );
};
