import React, { useState } from 'react'
export function FAQ({}) {
  return (
    <section className="bg-white dark:bg-gray-900 pt-12">
      <div
        className="max-w-screen-xl px-4 pb-8 mx-auto lg:pb-24 lg:px-6"
        id="faq"
      >
        <h2 className="mb-6 text-3xl font-extrabold tracking-tight text-center text-gray-900 lg:mb-8 lg:text-3xl dark:text-white">
          Frequently asked questions
        </h2>
        <div className="max-w-screen-md mx-auto">
          <div
            id="accordion-flush"
            data-accordion="collapse"
            data-active-classes="bg-white dark:bg-gray-900 text-gray-900 dark:text-white"
            data-inactive-classes="text-gray-500 dark:text-gray-400"
          >
            <FAQItem
              defaultSelected
              title="How does Followgraph for Hugging Face work?"
            >
              Followgraph looks up all the people you follow on Hugging Face,
              and then the people <em>they</em> follow. Then it sorts them by
              the number of mutuals, or otherwise by how popular those accounts
              are.
              <br />
              It then shows the list with Hugging Face links to follow them.
            </FAQItem>

            <FAQItem title="Do I need to grant Followgraph any permissions?">
              Not at all! Followgraph uses public APIs to fetch potential people
              you can follow on Hugging Face. In fact, it only does
              inauthenticated network requests.
            </FAQItem>

            <FAQItem title="Help! The search got stuck.">
              Don&apos;t worry. The list of suggestions will load in 30 seconds
              or so. Sometimes it gets stuck because one or more of the queries
              made to Hugging Face time out. This is not a problem, because the
              rest of the queries will work as expected.
            </FAQItem>

            <FAQItem title="Why don't I see any results?">
              Make sure you have no typos in the Hugging Face handle, and make
              sure you follow at least a few people to seed the search.
            </FAQItem>

            <FAQItem title="How can I contribute with suggestions?">
              Click the &quot;Fork me on Github&quot; link on the top right, and
              open up an issue.
            </FAQItem>

            <FAQItem title="Why is this not a core Hugging Face feature?">
              Well, maybe it should be. In the meantime, you can use this
              website.
            </FAQItem>

            <FAQItem title="Can I download the list of accounts as CSV?">
              While it would be a useful feature, Followgraph does <em>not</em>{' '}
              plan to offer this functionality as it would facilitate inorganic
              and potentially malicious behaviour.
            </FAQItem>

            <FAQItem title="Why don't I see Hugging Face staff members?">
              Followgraph does not include Hugging Face staff members to
              increase the diversity of the suggestions, and promote the
              discovery of new accounts.
            </FAQItem>
          </div>
        </div>
      </div>
    </section>
  )
}

function FAQItem({
  defaultSelected,
  title,
  children,
}: {
  defaultSelected?: boolean
  title: string
  children: React.ReactNode
}) {
  const [selected, setSelected] = useState(defaultSelected)
  return (
    <>
      <h3 id="accordion-flush-heading-1">
        <button
          type="button"
          onClick={() => setSelected(!selected)}
          className={`flex items-center justify-between w-full py-5 font-medium text-left text-gray-${
            selected ? 900 : 500
          } bg-white border-b border-gray-200 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-${
            selected ? 200 : 400
          }`}
          data-accordion-target="#accordion-flush-body-1"
          aria-expanded="true"
          aria-controls="accordion-flush-body-1"
        >
          <span>{title}</span>
          <svg
            data-accordion-icon
            className="w-6 h-6 rotate-180 shrink-0"
            fill="currentColor"
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fillRule="evenodd"
              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
              clipRule="evenodd"
            />
          </svg>
        </button>
      </h3>
      {selected ? (
        <div
          id="accordion-flush-body-1"
          aria-labelledby="accordion-flush-heading-1"
        >
          <div className="py-5 border-b border-gray-200 dark:border-gray-700 dark:text-gray-300">
            {children}
          </div>
        </div>
      ) : null}
    </>
  )
}