"use client"

import { Drawer } from "antd"
import classNames from "classnames"
import { DrawerCss } from "./style"

type IProps = {
  isOpen: boolean
  setOpen: (value: boolean) => void
}

type FAQItem = {
  title: string
  content: string
}

type IQuestionItem = {
  quest: string
  answer: string
}

export default function FAQDrawer({ isOpen, setOpen }: IProps) {
  const listFaq: FAQItem[] = [
      {
        title: "Join",
        content:
          "First, you need to establish your referral code. Go to settings and select “My Referral Code.” Choose and type in a code which you can give to friends, clients, contacts, and customers. Don’t worry, the system will not allow duplicate codes. You can have up to three codes.",
      },
      {
        title: "Promote",
        content:
          "The next step is to invite friends. Be sure that you allow Wizzor to access your phones contact list. Go to settings and select “Invite Friends.” Then simply select those on your contact list you wish to invite. Next click “Send Invite.” Then choose the affiliate code you want to use and click “OK.” Your invite will then be sent to those you’ve selected.",
      },
      {
        title: "Earn Money",
        content:
          "Let’s say you have 1000 contacts and they all join. With that many of your contacts joining, you will receive $838.80, less the 5% PayPal charges for the transaction, per month. This will result in an income of $10065.60 before the PayPal fee. You are responsible for all taxes on this income and you will receive a 1099 for income tax purposes in the United States. Those in other countries are subject to their own tax laws. Further, if one of your contacts signs up with your referral number and refers to Wizzor over 2000 members, we will pay an additional 6% override the first year and 3% the following year. There will be no further override payments after the second year.",
      },
    ]

  const questions: IQuestionItem[] = [
    {
      quest: "Do we need tax information?",
      answer:
        "The Tax Identification Number is for U S residents only. U S residents will be sent a Form 1099, for Internal Revenue Service reporting purposes, to their email address at the end of the tax year. Any changes to your address and email needs to be updated for payment purposes.",
    },
    {
      quest: "How can I set my referral code?",
      answer:
        "Setting up a referral code is really very simple.
First go to settings and select My Referral Code.
Here you will be able to establish up to three codes, which you can provide to those you are referring.",
    },
    {
      quest: "How can I earn thru Wizzor affiliate program?",
      answer: "Those choosing to participate in the program will receive twelve percent of the monthly subscription paid by each person they refer.
Anyone, an individual or business, can be an affiliate.
People you refer will register using a referral number you provide them when you ask them to join Wizzor.",
    },
  ]

  return (
    <Drawer
      className={classNames(DrawerCss)}
      closable
      destroyOnClose
      title={<p>How Does it Work</p>}
      placement="right"
      open={isOpen}
      onClose={() => setOpen(false)}
      width={594}>
      <div className="px-4 pt-4">
        <p>
          Wizzor and Wizzorchat is a new communications platform and a one stop shop for what you want online. The only way for people to communicate here is if
          they are a member as well. The best way is to invite your friends and give each one your affiliate referral code that you establish in settings.
          Having ten friends sign up offsets your cost and you start making money. Think of it as a coop where members share in the profits of the organization.
          Just complete the following steps.
        </p>
        <ul className="mt-4">
          {listFaq.map((item, index) => (
            <li
              key={index}
              className="flex items-start gap-3 mb-4">
              <span className="w-8 h-8 rounded-full text-white bg-secondary-100 flex items-center justify-center shrink-0">{index + 1}</span>
              <div>
                <h3 className="font-semibold text-lg">{item.title}</h3>
                <p>{item.content}</p>
              </div>
            </li>
          ))}
        </ul>
      </div>
      <hr />
      <div className="px-4 pt-4">
        <h2 className="font-semibold text-2xl">FAQ</h2>
        <ul className="mt-4">
          {questions.map((item, index) => (
            <li
              key={index}
              className="mb-4">
              <h3 className="font-semibold text-lg mb-2">{item.quest}</h3>
              <p>{item.answer}</p>
            </li>
          ))}
        </ul>
      </div>
    </Drawer>
  )
}