import { FaChevronRight } from "react-icons/fa6";

import { ROLES_LIST } from "@/constants/ui-helpers";
import Button from "@/components/common/button";

type SuitableForSectionProps = {
  isLoggedIn: boolean;
  onClickSignup: () => void;
};

function SuitableForSection({
  isLoggedIn,
  onClickSignup,
}: SuitableForSectionProps) {
  return (
    <section className="py-24 bg-b2b-light dark:bg-b2b-dark">
      <h1 className="font-inter font-black text-3xl ps-0 sm:ps-12 md:ps-20 xl:ps-24 text-center sm:text-start">
        See who else is part of our panel.
      </h1>
      <div className="mt-12 text-center mx-8 sm:mx-0">
        <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 xl:grid-cols-3 xxl:grid-cols-6 sm:ps-20 xl:ps-24 sm:pe-20 xl:pe-24">
          {ROLES_LIST.map((feature) => {
            const Icon = feature.icon;

            return (
              <div key={feature.id} className="pt-6">
                <div className="flow-root rounded-xl bg-white border border-gray-200 dark:border-white/10 dark:bg-[#18181a] dark:border-gray-700 px-6 pb-8 min-h-full">
                  <div className="-mt-6">
                    <div>
                      <span
                        aria-hidden
                        className="inline-flex items-center justify-center rounded-full bg-b2b-teal-blue dark:bg-b2b-spring-rain text-white dark:text-black p-3 text-2xl outline-dashed outline-1 outline-offset-4 outline-b2b-teal-blue dark:outline-b2b-spring-rain"
                      >
                        <Icon />
                      </span>
                    </div>
                    <h3 className="mt-8 text-lg sm:text-xl font-bold font-inter">
                      {feature.title}
                    </h3>
                    <p className="mt-5 text-sm text-gray-600 dark:text-gray-300">
                      {feature.description}
                    </p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
      <p className="pt-12 px-8 text-lg text-center">
        Don&apos;t see your profession listed? You can still join our business
        panel and participate in a diverse range of research opportunities. Sign
        up today!
      </p>
      <div className="text-center mx-8 sm:mx-0">
        <Button
          btnLabel={isLoggedIn ? "Explore our opportunities" : "Join us now"}
          className="mt-6 w-96"
          customVariant="b2b"
          endContent={<FaChevronRight />}
          onClick={onClickSignup}
        />
      </div>
    </section>
  );
}

export default SuitableForSection;