import PropTypes from "prop-types";
import { FormattedMessage } from "react-intl";
import CapButton from "@capillarytech/cap-ui-library/CapButton";
import CapIcon from "@capillarytech/cap-ui-library/CapIcon";
import messages from "./messages";
import React from "react";

const AddTestCustomerButton = ({
  searchValue,
  handleAddTestCustomer
}) => (
  <CapButton
    onClick={handleAddTestCustomer}
    type="flat"
    size="small"
    className="test-customer-add-btn"
    prefix={
      <CapIcon
        type="add-profile"
        className="add-test-customer-icon"
      />
    }
  >
    <FormattedMessage
      {...messages.addTestCustomerWithValue}
      values={{
        searchValue: (
          <span className="test-customer-add-btn-value" title={searchValue || ""}>
            "{searchValue}"
          </span>
        ),
      }}
    />
  </CapButton>
);

AddTestCustomerButton.propTypes = {
  searchValue: PropTypes.string.isRequired,
  handleAddTestCustomer: PropTypes.func.isRequired
};

export default AddTestCustomerButton;