import React, { forwardRef } from 'react';
import { asUploadButton } from '@rpldy/upload-button';
import Button from '@mui/material/Button';
import AddAPhoto from '@mui/icons-material/AddAPhoto';

import { PhotoUploadButtonProps } from './types';

const PhotoUploadButton = asUploadButton(
  /* tslint:disable:no-unused-variable */
  forwardRef((props: PhotoUploadButtonProps, _) => {
    const { component, title, ...otherProps } = props;
    const Component = component;

    if (component) return <Component {...otherProps} />;

    return (
      <Button variant="contained" endIcon={<AddAPhoto />} {...otherProps}>
        {title || 'Take picture'}
      </Button>
    );
  })
);

export default PhotoUploadButton;