import React from "react";
import { __ } from "@wordpress/i18n";
import { LogIn } from "lucide-react";
import { buildUrl } from "@libs/url";

const LoginAsCustomerButton = ({ customer }) => {
  if (!(customer?.id > 0)) {
    return null;
  }

  const label = (
    <>
      <LogIn size={14} />
      {__("Login as Customer", "arraysubs")}
    </>
  );

  return customer.login_as_user_url ? (
    <a
      href={buildUrl(customer.login_as_user_url, {
        back_url: window.location.href,
      })}
      className="button button-secondary arraysubs-button--has-icon"
    >
      {label}
    </a>
  ) : (
    <button
      type="button"
      className="button button-secondary arraysubs-button--has-icon"
      disabled
      title={customer.login_as_user_reason || ""}
    >
      {label}
    </button>
  );
};

export default LoginAsCustomerButton;