import React from "react";
import PropTypes from "prop-types";
import { ListItem, ListItemText, ListItemIcon, Link, Tooltip, IconButton } from "@mui/material";

const ContactIcon = ({ onIconClick, iconTooltip, ...props }) => {
  if (!onIconClick) return <props.icon />;
  return (
    <Tooltip title={iconTooltip}>
      <IconButton size="small" onClick={onIconClick}>
        <props.icon />
      </IconButton>
    </Tooltip>
  );
};

ContactIcon.propTypes = {
  onIconClick: PropTypes.func,
  iconTooltip: PropTypes.string
};

const ContactOption = ({ tooltip, label, link, onClick, ...props }) => {
  const linkLabel = label ?? link;
  return (
    <ListItem dense>
      <ListItemIcon>
        <ContactIcon {...props} />
      </ListItemIcon>
      <ListItemText
        primary={
          <Tooltip title={tooltip}>
            {onClick ? (
              <Link href="#" onClick={onClick} style={{ fontWeight: "bold" }}>
                {linkLabel}
              </Link>
            ) : (
              <Link href={link} target="_blank" style={{ fontWeight: "bold" }}>
                {linkLabel}
              </Link>
            )}
          </Tooltip>
        }
      />
    </ListItem>
  );
};

ContactOption.propTypes = {
  tooltip: PropTypes.string.isRequired,
  label: PropTypes.string,
  link: PropTypes.string.isRequired,
  onClick: PropTypes.func,
  onIconClick: PropTypes.func
};

export default ContactOption;
