import { Fragment, useEffect, useState } from "react";
import { Combobox, Transition } from "@headlessui/react";
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";
import classNames from "../../../utils/helpers/className";
import MobileSearch from "../..//mobile/searchIcon";
import { Follow, UserProfile } from "../../../types/notifications";
import ComboTwo from "../../comboTwo";
import gameInfo from "../../../../gameCategories.json";
import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
import Image from "next/legacy/image";
import {
  simStreamers,
  streamingProfile,
} from "../../../utils/helpers/streamer";
import "./styles.module.css";
import SearchIcon from "../../../utils/icons/searchIcon";
import SmallSearchButton from "../../buttons/smallSearchButton";
const people = [
  { id: 1, name: "Wade Cooper" },
  { id: 2, name: "Arlene Mccoy" },
  { id: 3, name: "Devon Webb" },
  { id: 4, name: "Tom Cook" },
  { id: 5, name: "Tanya Fox" },
  { id: 6, name: "Hellen Schmidt" },
];
type GameType = {
  name: string;
  id: number;
  views: number;
  category: string[];
};

export default function ComboBox({
  mobile,
  search,
  customCombo,
  props,
  profile,
  smallSearch,
}: {
  smallSearch?: boolean;
  profile?: UserProfile;
  search: boolean;
  mobile: boolean | undefined;
  customCombo?: boolean;
  props: {
    handleClick: (e: any) => void;
    searchTab: boolean;
    opened: boolean;
    setSearchTab: (e: boolean) => void;
  };
}) {
  const [games, setGames] = useState<GameType[] | null>(null);
  const [selected, setSelected] = useState("");
  const [query, setQuery] = useState("");
  const [userProfile, setUserProfile] = useState<UserProfile>();
  useEffect(() => {
    if (profile && !userProfile) {
      const user = profile;
      console.log("user c", user);
      setUserProfile(user);
    }
  }, [profile]);
  useEffect(() => {
    console.log("query", query);
    console.log("query.len", query.length);
  }, [query]);
  useEffect(() => {
    if (games && games.length === 0 && gameInfo) {
      console.log("got info", profile);
      const gameArray = Object.entries(gameInfo).length;
      const array = [];
      for (let i = 0; i < gameArray; i++) {
        array.push(gameInfo[i]);
      }
      setGames(array as GameType[]);
    }
  }, [gameInfo]);

  const filteredGames =
    query === ""
      ? query
      : games &&
        games.filter((game: GameType) =>
          game.name
            .toLocaleLowerCase()
            .replace(/\s+/g, "")
            .includes(query.toLowerCase().replace(/\s+/g, ""))
        );
  const filteredFollowers = (following: Follow[]) => {
    console.log(following, "following", userProfile);
    const answer = following.filter((game: Follow) =>
      game.name
        .toLowerCase()
        .replace(/\s+/g, "")
        .includes(query.toLowerCase().replace(/\s+/g, ""))
    );
    if (answer !== undefined) {
      return answer;
    }
    return [];
  };
  const filteredStreamers: streamingProfile[] | string =
    query === ""
      ? query
      : simStreamers.filter((game: streamingProfile) =>
          game.name
            .toLocaleLowerCase()
            .replace(/\s+/g, "")
            .includes(query.toLowerCase().replace(/\s+/g, ""))
        );

  if (mobile && customCombo && props) {
    return <MobileSearch props={props} profile={userProfile} />;
  }
  if (mobile == false && search == true && userProfile) {
    return <ComboTwo user={userProfile} />;
  } else {
    // console.log(
    //   filteredFollowers(userProfile?.following),
    //   "filtered followers"
    // );
    return (
      <div
        className={classNames(
          mobile == true && search == true
            ? "h-full w-full"
            : smallSearch
            ? "flex h-full max-w-[20.25rem] 2xs:max-sm:w-full"
            : "h-full max-w-[20.25rem] 2xs:max-sm:w-full",
          " relative w-full  justify-between pl-2 max-sm:pr-1 sm:flex sm:px-4 sm:pr-2"
        )}
      >
        <div
          className={classNames(
            mobile && search == false
              ? "hidden w-full"
              : "h-full w-full grow 2xs:max-sm:flex sm:w-full",
            "  2xs:max-sm:justify-end"
          )}
        >
          <Combobox value={selected} onChange={setSelected}>
            <div
              className={classNames(
                "flex h-full  w-full flex-col items-center justify-center"
              )}
            >
              <Combobox.Input
                onKeyDown={
                  smallSearch
                    ? (e: React.KeyboardEvent<HTMLInputElement>) => {
                        if (e.code === "Space") {
                          e.stopPropagation();
                        }
                      }
                    : undefined
                }
                autoComplete="off"
                tabIndex={1}
                autoFocus={mobile && search ? true : false}
                className={classNames(
                  smallSearch == true ? "block" : "hidden sm:block",
                  mobile == true && search == true
                    ? "hidden rounded-md sm:block"
                    : "z-10 rounded-l-sm",
                  "  h-[75%] w-full rounded-l-md border-transparent  bg-[#414144] py-1.5 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:border-0 focus:bg-black focus:text-white focus:ring-2 focus:ring-violet-400"
                )}
                displayValue={(game: GameType) => game?.name}
                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                  setQuery(event.target.value);
                  // console.log(profile, "profile");
                  // console.log(filteredGames, games, "filteredGames");
                }}
                placeholder="Search..."
              />
              {/* {query !== "" && search == false && (
                <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
                  <ChevronUpDownIcon
                    className="h-5 w-5 text-gray-400"
                    aria-hidden="true"
                  />
                </Combobox.Button>
              )} */}
            </div>
            <Transition
              as={Fragment}
              leave="transition ease-in duration-100"
              leaveFrom="opacity-100"
              leaveTo="opacity-0"
              afterLeave={() => {
                setQuery("");
                props.setSearchTab(false);
              }}
            >
              <Combobox.Options
                className={classNames(
                  mobile == true && search == true
                    ? " ui-active:bg-white ui-not-active:bg-red left-[2.85rem] top-[3.05rem] flex w-11/12 flex-col overflow-y-scroll text-white "
                    : smallSearch == true
                    ? " flex w-full max-w-[20.4rem] grow translate-x-[2.30rem] -translate-y-[0.65rem] flex-col overflow-auto bg-[#111114] text-gray-400"
                    : "flex w-full max-w-[97.0%] grow -translate-x-[0.45rem] -translate-y-[2.29rem] flex-col overflow-auto bg-[#111114] text-gray-400",
                  "absolute mt-1   rounded-md bg-transparent py-1   ring-opacity-5 focus:outline-none focus:ring-1 focus:ring-white sm:text-sm"
                )}
              >
                {query !== "" &&
                  userProfile &&
                  userProfile.following !== undefined && (
                    <div
                      className={classNames(
                        !mobile ? "rounded-t-md bg-[#111114] pt-9" : "",
                        "text-red flex h-full flex-col"
                      )}
                    >
                      {userProfile.following &&
                        filteredFollowers(userProfile.following).map(
                          (follower: Follow, index: number) =>
                            index > 1 ? null : (
                              <Combobox.Option
                                key={`comboOption-${follower.id}`}
                                as="button"
                                tabIndex={index}
                                className={({ active }) =>
                                  `ui-active:border-0 ui-active:border-transparent relative cursor-default select-none py-1 pl-2 pr-4 ${
                                    active
                                      ? "border-0 "
                                      : mobile == true && search == true
                                      ? "w-full text-white"
                                      : " text-[#efeff1]"
                                  }`
                                }
                                value={follower}
                              >
                                {/* className={classNames(active ? "border-1 border-white text-white" : "text-gray-900", "relative cursor-default select-none py-2 pl-10 pr-4")} */}
                                {({ selected, active }) => (
                                  <>
                                    {mobile ? (
                                      <div
                                        role="button"
                                        className="ui-active:bg-red ui-selected:bg-white flex w-full flex-row"
                                      >
                                        <div
                                          role="button"
                                          className={` flex flex-row justify-between truncate ${
                                            active ? "border-0" : "border-0"
                                          } ${
                                            selected
                                              ? "font-medium"
                                              : "font-normal"
                                          }`}
                                        >
                                          <div className="flex w-[3rem] flex-col items-center justify-center">
                                            <div className="w-10">
                                              {/* <MagnifyingGlassIcon /> */}
                                              {/* follow profile pic  */}
                                              <Image
                                                src={`comboImage-${follower.pic}`}
                                                width={45}
                                                height={45}
                                                className=" rounded-full"
                                              />
                                            </div>
                                          </div>
                                          {/* <a>{game.name}</a> */}
                                          <a className="pl-4">
                                            {follower.name}
                                          </a>
                                          {/* {query} */}
                                        </div>
                                        {selected ? (
                                          <span
                                            className={`absolute inset-y-0 left-0 flex items-center pl-3 ${
                                              active && search == true
                                                ? "border-1 border-white text-white"
                                                : "text-teal-600"
                                            }`}
                                          >
                                            <CheckIcon
                                              className="h-5 w-5"
                                              aria-hidden="true"
                                            />
                                          </span>
                                        ) : null}
                                      </div>
                                    ) : (
                                      <button
                                        role="button"
                                        className="ui-active:bg-red ui-selected:bg-white flex w-full flex-row "
                                      >
                                        <button
                                          role="button"
                                          className={` flex flex-row justify-between truncate ${
                                            active ? "border-0" : "border-0"
                                          } ${
                                            selected
                                              ? "font-medium"
                                              : "font-normal"
                                          }`}
                                        >
                                          <button className="flex w-[3rem] flex-col items-center justify-center">
                                            <button className="w-6">
                                              {/* <MagnifyingGlassIcon /> */}
                                              {/* follow profile pic  */}
                                              <Image
                                                src={`${follower.pic}`}
                                                width={45}
                                                height={45}
                                                className=" rounded-full"
                                              />
                                            </button>
                                          </button>
                                          {/* <a>{game.name}</a> */}
                                          <a className="text-[#efeff1]text-[0.8rem] pl-0 font-bold xl:pl-4">
                                            {follower.name}
                                          </a>
                                          {/* {query} */}
                                        </button>
                                        {selected ? (
                                          <span
                                            className={`absolute inset-y-0 left-0 flex items-center pl-3 ${
                                              active && search == true
                                                ? "border-1 border-white text-white"
                                                : "text-teal-600"
                                            }`}
                                          >
                                            <CheckIcon
                                              className="h-5 w-5"
                                              aria-hidden="true"
                                            />
                                          </span>
                                        ) : null}
                                      </button>
                                    )}
                                  </>
                                )}
                              </Combobox.Option>
                            )
                        )}
                    </div>
                  )}
                {simStreamers && query !== "" && filteredStreamers == null
                  ? null
                  : query.length == 0
                  ? null
                  : Array.isArray(filteredStreamers)
                  ? filteredStreamers.map(
                      (streamer: streamingProfile, index: number) =>
                        index > 1 ? null : (
                          <Combobox.Option
                            key={streamer.id}
                            as="div"
                            tabIndex={index}
                            className={classNames(
                              mobile ? "" : "bg-[#111114]",
                              ({ active }: { active: boolean }) =>
                                `ui-active:border-2 ui-active:border-white relative cursor-default select-none py-1 pl-2 pr-4 ${
                                  active
                                    ? "border-1 border-white "
                                    : mobile == true && search == true
                                    ? "text-white"
                                    : " bg-[#1E1E20]  text-[#efeff1]"
                                }`
                            )}
                            value={streamer.name}
                          >
                            {/* className={classNames(active ? "border-1 border-white text-white" : "text-gray-900", "relative cursor-default select-none py-2 pl-10 pr-4")} */}
                            {({ selected, active }) => (
                              <>
                                {mobile ? (
                                  <div
                                    role="button"
                                    className="ui-active:bg-red ui-selected:bg-white flex w-full flex-row"
                                  >
                                    <div
                                      role="button"
                                      className={`ui-active:border-1 ui-active:border-white flex flex-row justify-between truncate ${
                                        active
                                          ? "border-1 border-white"
                                          : "border-0"
                                      } ${
                                        selected ? "font-medium" : "font-normal"
                                      }`}
                                    >
                                      <div className="flex w-[3rem] flex-col items-center justify-center">
                                        <div className="w-[2.8rem]">
                                          <Image
                                            src={`/pfp/${streamer.name
                                              .toLowerCase()
                                              .replaceAll(" ", "")
                                              .replace(
                                                /[^a-zA-Z0-9 ]/g,
                                                ""
                                              )}.png`}
                                            alt="category image"
                                            className={classNames(
                                              mobile
                                                ? "w-full flex-1 rounded-full"
                                                : "",
                                              "flex flex-1"
                                            )}
                                            layout="responsive"
                                            width={25}
                                            height={25}
                                          />
                                        </div>
                                      </div>
                                      <a className="pl-4 text-[#efeff1]">
                                        {streamer.name}
                                      </a>
                                      {/* <a>{follower.name}</a> */}
                                      {/* {query} */}
                                    </div>
                                    {selected ? (
                                      <span
                                        className={`absolute inset-y-0 left-0 flex items-center pl-3 ${
                                          active && search == true
                                            ? "border-1 border-white text-white"
                                            : "text-teal-600"
                                        }`}
                                      >
                                        <CheckIcon
                                          className="h-5 w-5"
                                          aria-hidden="true"
                                        />
                                      </span>
                                    ) : null}
                                  </div>
                                ) : (
                                  <button
                                    role="button"
                                    className="ui-active:bg-red ui-selected:bg-white ] flex w-full flex-row"
                                  >
                                    <button
                                      role="button"
                                      className={`ui-active:border-1 ui-active:border-white flex flex-row justify-between truncate ${
                                        active
                                          ? "border-1 border-white"
                                          : "border-0"
                                      } ${
                                        selected ? "font-medium" : "font-normal"
                                      }`}
                                    >
                                      <button className="flex w-[3rem] flex-col items-center justify-center">
                                        <button className="w-6">
                                          <Image
                                            src={`/pfp/${streamer.name
                                              .toLowerCase()
                                              .replaceAll(" ", "")
                                              .replace(
                                                /[^a-zA-Z0-9 ]/g,
                                                ""
                                              )}.png`}
                                            alt="category image"
                                            className={classNames(
                                              mobile
                                                ? "w-full flex-1 rounded-full"
                                                : "rounded-full",
                                              "flex flex-1"
                                            )}
                                            layout="responsive"
                                            width={25}
                                            height={25}
                                          />
                                        </button>
                                      </button>
                                      <a className="pl-0 text-[0.8rem] font-bold text-[#efeff1] xl:pl-4">
                                        {streamer.name}
                                      </a>
                                      {/* <a>{follower.name}</a> */}
                                      {/* {query} */}
                                    </button>
                                    {selected ? (
                                      <span
                                        className={`absolute inset-y-0 left-0 flex items-center pl-3 ${
                                          active && search == true
                                            ? "border-1 border-white text-white"
                                            : "text-teal-600"
                                        }`}
                                      >
                                        <CheckIcon
                                          className="h-5 w-5"
                                          aria-hidden="true"
                                        />
                                      </span>
                                    ) : null}
                                  </button>
                                )}
                              </>
                            )}
                          </Combobox.Option>
                        )
                    )
                  : null}
                {games &&
                games.length === 0 &&
                query !== "" &&
                filteredGames == null ? (
                  <div
                    className={classNames(
                      mobile ? "" : "",
                      "relative cursor-default select-none py-2 px-4 text-gray-700"
                    )}
                  >
                    Nothing found.
                  </div>
                ) : query.length == 0 ? null : (
                  filteredGames &&
                  filteredGames.map(
                    (
                      game: {
                        name: string;
                        id: number;
                        views: number;
                        category: string[];
                      },
                      index: number
                    ) =>
                      index > 2 ? null : (
                        <Combobox.Option
                          key={index}
                          as="div"
                          tabIndex={index}
                          className={classNames(
                            mobile ? "" : "bg-[#111114]",
                            ({ active }: { active: boolean }) =>
                              `ui-active:border-2 ui-active:border-white relative cursor-default select-none py-1 pl-2 pr-4 ${
                                active
                                  ? "border-1 border-white "
                                  : mobile == true && search == true
                                  ? "text-white"
                                  : " bg-[#1E1E20]  text-[#efeff1]"
                              }`
                          )}
                          value={game}
                        >
                          {/* className={classNames(active ? "border-1 border-white text-white" : "text-gray-900", "relative cursor-default select-none py-2 pl-10 pr-4")} */}
                          {({ selected, active }) => (
                            <>
                              {mobile ? (
                                <div
                                  role="button"
                                  className="ui-active:bg-red ui-selected:bg-white flex w-full flex-row"
                                >
                                  <div
                                    role="button"
                                    className={`ui-active:border-1 ui-active:border-white flex flex-row justify-between truncate ${
                                      active
                                        ? "border-1 border-white"
                                        : "border-0"
                                    } ${
                                      selected ? "font-medium" : "font-normal"
                                    }`}
                                  >
                                    <div className="flex w-[3rem] flex-col items-center justify-center">
                                      <div className="w-[2.8rem]">
                                        <Image
                                          src={`/gameCovers/${game.name
                                            .toLowerCase()
                                            .replaceAll(" ", "")
                                            .replace(
                                              /[^a-zA-Z0-9 ]/g,
                                              ""
                                            )}.jpg`}
                                          alt="category image"
                                          className={classNames(
                                            mobile ? "w-full flex-1" : "",
                                            "flex flex-1"
                                          )}
                                          layout="responsive"
                                          width={25}
                                          height={30}
                                        />
                                      </div>
                                    </div>
                                    <a className="pl-4">{game.name}</a>
                                    {/* <a>{follower.name}</a> */}
                                    {/* {query} */}
                                  </div>
                                  {selected ? (
                                    <span
                                      className={`absolute inset-y-0 left-0 flex items-center pl-3 ${
                                        active && search == true
                                          ? "border-1 border-white text-white"
                                          : "text-teal-600"
                                      }`}
                                    >
                                      <CheckIcon
                                        className="h-5 w-5"
                                        aria-hidden="true"
                                      />
                                    </span>
                                  ) : null}
                                </div>
                              ) : (
                                <button
                                  role="button"
                                  className="ui-active:bg-red ui-selected:bg-white flex w-full flex-row"
                                >
                                  <button
                                    role="button"
                                    className={`ui-active:border-1 ui-active:border-white flex flex-row justify-between truncate ${
                                      active
                                        ? "border-1 border-white"
                                        : "border-0"
                                    } ${
                                      selected ? "font-medium" : "font-normal"
                                    }`}
                                  >
                                    <button className="flex w-[3rem] flex-col items-center justify-center">
                                      <button className="w-6">
                                        <Image
                                          src={`/gameCovers/${game.name
                                            .toLowerCase()
                                            .replaceAll(" ", "")
                                            .replace(
                                              /[^a-zA-Z0-9 ]/g,
                                              ""
                                            )}.jpg`}
                                          alt="category image"
                                          className={classNames(
                                            mobile ? "w-full flex-1" : "",
                                            "flex flex-1"
                                          )}
                                          layout="responsive"
                                          width={25}
                                          height={30}
                                        />
                                      </button>
                                    </button>
                                    <a className="pl-0 text-[0.8rem] font-bold text-[#efeff1] xl:pl-4">
                                      {game.name}
                                    </a>
                                    {/* <a>{follower.name}</a> */}
                                    {/* {query} */}
                                  </button>
                                  {selected ? (
                                    <span
                                      className={`absolute inset-y-0 left-0 flex items-center pl-3 ${
                                        active && search == true
                                          ? "border-1 border-white text-white"
                                          : "text-teal-600"
                                      }`}
                                    >
                                      <CheckIcon
                                        className="h-5 w-5"
                                        aria-hidden="true"
                                      />
                                    </span>
                                  ) : null}
                                </button>
                              )}
                            </>
                          )}
                        </Combobox.Option>
                      )
                  )
                )}
                {query !== "" && (
                  <Combobox.Option
                    key={69}
                    as="div"
                    className={({ active }) =>
                      `ui-active:border-2 ui-active:border-white relative cursor-default select-none py-1 pl-2 pr-4 ${
                        active
                          ? "border-1 border-white "
                          : mobile == true && search == true
                          ? "text-white"
                          : "text-[#efeff1]"
                      }`
                    }
                    value={query}
                  >
                    {/* className={classNames(active ? "border-1 border-white text-white" : "text-gray-900", "relative cursor-default select-none py-2 pl-10 pr-4")} */}
                    {({ selected, active }) => (
                      <>
                        {mobile ? (
                          <div
                            role="button"
                            className="ui-active:bg-red ui-selected:bg-white"
                          >
                            <div
                              role="button"
                              className={`ui-active:border-1 ui-active:border-white flex flex-row justify-start truncate ${
                                active ? "border-1 border-white" : "border-0"
                              } ${selected ? "font-medium" : "font-normal"}`}
                            >
                              <div className="flex w-[3rem] flex-col items-center justify-center">
                                <div className="w-6">
                                  <MagnifyingGlassIcon />
                                </div>
                              </div>
                              <a className="text-[#efeff1]font-bold pl-0 xl:pl-4">
                                {query}
                              </a>
                              {/* <a>{follower.name}</a> */}
                              {/* {query} */}
                            </div>
                            {selected ? (
                              <span
                                className={`absolute inset-y-0 left-0 flex items-center pl-3 ${
                                  active && search == true
                                    ? "border-1 border-white text-white"
                                    : "text-teal-600"
                                }`}
                              >
                                <CheckIcon
                                  className="h-5 w-5"
                                  aria-hidden="true"
                                />
                              </span>
                            ) : null}
                          </div>
                        ) : (
                          <button
                            role="button"
                            className="ui-active:bg-red ui-selected:bg-white"
                          >
                            <button
                              role="button"
                              className={`ui-active:border-1 ui-active:border-white flex flex-row justify-start truncate ${
                                active ? "border-1 border-white" : "border-0"
                              } ${selected ? "font-medium" : "font-normal"}`}
                            >
                              <button className="flex w-[3rem] flex-col items-center justify-center">
                                <button className="w-6">
                                  <MagnifyingGlassIcon />
                                </button>
                              </button>
                              <a className="text-[#efeff1]font-bold pl-0 xl:pl-4 ">
                                {query}
                              </a>
                              {/* <a>{follower.name}</a> */}
                              {/* {query} */}
                            </button>
                            {selected ? (
                              <span
                                className={`absolute inset-y-0 left-0 flex items-center pl-3 ${
                                  active && search == true
                                    ? "border-1 border-white text-white"
                                    : "text-teal-600"
                                }`}
                              >
                                <CheckIcon
                                  className="h-5 w-5"
                                  aria-hidden="true"
                                />
                              </span>
                            ) : null}
                          </button>
                        )}
                      </>
                    )}
                  </Combobox.Option>
                )}
              </Combobox.Options>
            </Transition>
          </Combobox>
        </div>
        <div className=" flex h-full flex-col items-center justify-center pl-[0.050rem] 2xs:max-sm:items-end 2xs:max-sm:bg-transparent sm:grow">
          <div
            role="button"
            className={classNames(
              smallSearch == true ? "" : "",
              "flex flex-col items-center justify-center max-sm:hover:rounded-md max-sm:hover:bg-[#53535f78]"
            )}
          >
            {/* 
              <SearchIcon mobile={mobile} search={search} />
          */}
            {mobile !== undefined && !smallSearch && (
              <SmallSearchButton
                mobile={mobile}
                search={search}
                profile={profile}
                props={props}
                smallSearch={smallSearch}
              />
            )}
            {smallSearch == true && (
              <SearchIcon mobile={false} search={false} />
            )}
            {/* <svg
              aria-hidden="true"
              focusable="false"
              data-icon="search"
              className={classNames(
                mobile == true && search == true ? "hidden" : "block",
                mobile && search == false
                  ? "bg-transparent max-sm:w-[6.15vw]"
                  : "bg-[#53535f61]",
                " h-[100%] w-[2.0rem] grow rounded-r-md border border-transparent py-[0.35rem]   px-2  max-sm:bg-transparent xl:w-[2.15rem]  2xl:w-[2.35rem]"
              )}
              role="img"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 512 512"
            >
              <path
                fill="currentColor"
                d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
              ></path>
            </svg> */}
          </div>
        </div>
      </div>
    );
  }
}