"use client"

import { Button } from "antd"

type IProps = {
  isLoading?: boolean
  onCancel: () => void
  onAccept: () => void
}

export const AffiliateRules = ({ isLoading = false, onCancel, onAccept }: IProps) => {
  return (
    <div>
      <h3 className="mb-2 text-lg font-medium">Affiliate Rules</h3>
      <ul className="list-decimal list-inside">
        <li>
          The Affiliate section is primarily for businesses, organizations, non-profit organizations, religious congregations of any denomination, civic
          organizations, clubs, associations, professionals, but individuals may also participate.
        </li>
        <li>
          A Wizzor Affiliate can select a promotional code, which will be identified with their Wizzor account. They can refer their contacts, clients,
          customers, and friends to Wizzor using this code and receive a twelve percent, (12%), commission of the monthly subscription paid by each subscribing
          member they refer.
        </li>
        <li>
          Payment of commissions to Affiliates will be on a monthly basis via PayPal. Payment will consist of the total amount for accumulated paying
          subscribers during the month less fees charged us by PayPal. Note: The first thirty days are free to each subscriber. Once the subscription begins the
          monthly fee is collected by the respective device's app store. In turn, payment to Sidepatch, the owner operator of Wizzor, can take up to thirty
          days. Payment to Affiliates could take another fifteen days or more.
        </li>
        <li>Affiliates will have a dashboard telling the number of active subscribers with respect to the codes they control.</li>
        <li>
          Payment of commission is based solely on the number of active paying subscribers of Wizzor. Should a member cancel, no further commission. will be due
          on that subscriber.
        </li>
        <li>Abuse of any of the rules or purpose of Wizzor will result in the termination of the Affiliate relationship.</li>
      </ul>
      <div className="pt-4 flex items-center gap-2 w-full md:w-1/2 mx-auto mb-4">
        <Button
          onClick={() => onAccept()}
          loading={isLoading}
          type="primary"
          className="w-full md:!text-base lg:!text-lg font-bold !h-10 md:!h-12 !rounded-lg">
          ACCEPT
        </Button>
        <Button
          onClick={() => onCancel()}
          loading={isLoading}
          className="w-full md:!text-base lg:!text-lg font-bold !h-10 md:!h-12 !rounded-lg !border-[var(--secondary-20)] !bg-[var(--secondary-10)]">
          CANCEL
        </Button>
      </div>
    </div>
  )
}