import React from 'react';
import { Button } from 'react-bootstrap';
import { Icon } from '../shared/Icon';
import { useMediaQuery } from 'react-responsive';
import { breakpoints } from '../../utils/BootstrapHelper';

interface Props {
  onClick: () => void;
  color?: string;
  type: string;
}

const AddProfileButton: React.FC<Props> = ({ onClick }) => {
  const isMobile = useMediaQuery({ maxWidth: breakpoints.md - 1 });

  return (
    <Button
      variant='primary'
      type='button'
      onClick={onClick}
      className={`${isMobile ? 'flex-grow-1' : ''}`}
    >
      <div className='d-flex justify-content-center align-items-center'>
        <Icon iconName='PlusLg' />
        <span className='ms-1'>Add Faculty</span>
      </div>
    </Button>
  );
};

export default AddProfileButton;