// Paystack's stacked-bars mark in its brand cyan, used on the "Pay with
// Paystack" buttons. Brand colours: cyan #00C3F7, navy #011B33.
export const PAYSTACK_CYAN = "#00C3F7";
export const PAYSTACK_NAVY = "#011B33";

export default function PaystackMark({ className = "h-4 w-4" }: { className?: string }) {
  return (
    <svg viewBox="0 2.4 25 25.2" className={className} aria-hidden="true" focusable="false">
      <path
        fill={PAYSTACK_CYAN}
        d="M22.32 2.663H1.306C.594 2.663 0 3.263 0 3.985v2.37c0 .74.594 1.324 1.307 1.324h21.012c.73 0 1.307-.602 1.324-1.323V4.002c0-.738-.594-1.34-1.323-1.34zm0 13.192H1.306a1.3 1.3 0 00-.924.388 1.33 1.33 0 00-.383.935v2.37c0 .74.594 1.323 1.307 1.323h21.012c.73 0 1.307-.584 1.324-1.322v-2.371c0-.739-.594-1.323-1.323-1.323zm-9.183 6.58H1.307c-.347 0-.68.139-.924.387a1.33 1.33 0 00-.383.935v2.37c0 .74.594 1.323 1.307 1.323H13.12c.73 0 1.307-.6 1.307-1.322v-2.371a1.29 1.29 0 00-1.29-1.323zM23.643 9.258H1.307c-.347 0-.68.14-.924.387a1.33 1.33 0 00-.383.936v2.37c0 .739.594 1.323 1.307 1.323h22.32c.73 0 1.306-.601 1.306-1.323v-2.37a1.301 1.301 0 00-1.29-1.323z"
      />
    </svg>
  );
}