import React from 'react';
import PropTypes from 'prop-types';
import { IconButton, Typography, makeStyles, Link } from '@material-ui/core';

const useStyles = makeStyles((theme) => ({
  root: {
    marginBottom: theme.spacing(3),
    maxWidth: '100%',
  },
  iconButton: {
    maxWidth: '100%',
    '&:hover': {
      backgroundColor: 'transparent',
    },
  },
  label: {
    fontSize: '14px',
    color: theme.palette.text.secondary,
    marginLeft: theme.spacing(1),
  },
}));

const LinkWithIcon = ({ label, href, icon: Icon }) => {
  const classes = useStyles();

  return (
    <Link
      className={classes.root}
      target="_top"
      rel="noopener noreferrer"
      href={href}
    >
      <IconButton
        className={classes.iconButton}
        color="primary"
        size="small"
        disableRipple
      >
        <Icon />
        <Typography className={classes.label} noWrap>
          {label}
        </Typography>
      </IconButton>
    </Link>
  );
};

LinkWithIcon.propTypes = {
  icon: PropTypes.elementType.isRequired,
  href: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
};

export default LinkWithIcon;