import useHover from "@/hooks/useHover";
import clsx from "clsx";
import React from "react";
import { TIcon } from "../../Icon";

export interface SettingPanelProps {
  onChangePayPin?: () => void;
  openExportPhrase: () => void;
}

const SettingPanel: React.FC<SettingPanelProps> = ({
  onChangePayPin,
  openExportPhrase,
}) => {
  const [hoverRef, isHover] = useHover();
  return (
    <div className="uikit-text-t1 uikit-px-5 uikit-flex-col uikit-justify-start uikit-items-start uikit-gap-4 uikit-inline-flex uikit-pt-4 uikit-pb-[70px]">
      <div className="uikit-self-stretch uikit-h-[92px] uikit-flex-col uikit-justify-start uikit-items-start uikit-gap-2 uikit-flex">
        <div className="uikit-text-secondary uikit-text-sm uikit-font-normal uikit-font-Switzer uikit-leading-tight">
          2FA
        </div>
        <div
          ref={hoverRef}
          className={clsx(
            "uikit-self-stretch uikit-pl-3.5 uikit-pr-1.5 uikit-py-5 uikit-rounded-lg uikit-border uikit-border-solid uikit-border-border uikit-justify-between uikit-items-center uikit-inline-flex uikit-cursor-pointer",
            isHover && "uikit-opacity-70",
          )}
          onClick={onChangePayPin}
        >
          <div className="uikit-justify-start uikit-items-center uikit-gap-3 uikit-flex">
            <TIcon name="tg_wallet_lock-up" fontSize="20" />
            <div className="uikit-text-t1 uikit-text-base uikit-font-medium uikit-font-['Switzer'] uikit-leading-snug">
              Change Pay PIN
            </div>
          </div>

          <TIcon
            name="tg_wallet_arrow_right-right0"
            fontSize="24"
            className="uikit-text-t2 uikit-relative uikit-right-1.5"
          />
        </div>
      </div>
      <div className="uikit-self-stretch uikit-h-[92px] uikit-flex-col uikit-justify-start uikit-items-start uikit-gap-2 uikit-flex">
        <div className="uikit-text-secondary uikit-text-sm uikit-font-normal uikit-font-['Switzer'] uikit-leading-tight">
          Export
        </div>
        <div
          className="uikit-self-stretch uikit-pl-3.5 uikit-pr-1.5 uikit-py-5 uikit-rounded-lg uikit-border uikit-border-solid uikit-border-border uikit-justify-between uikit-items-center uikit-inline-flex uikit-cursor-pointer hover:uikit-opacity-70"
          onClick={openExportPhrase}
        >
          <div className="uikit-justify-start uikit-items-center uikit-gap-3 uikit-flex">
            <TIcon name="tg_wallet_payment-code" fontSize="20" />
            <div className="uikit-flex-col uikit-justify-center uikit-items-start uikit-inline-flex">
              <div className="uikit-text-t1 uikit-text-base uikit-font-medium uikit-font-['Switzer'] uikit-leading-snug">
                Mnemonic phrase
              </div>
            </div>
          </div>
          <div className="uikit-justify-end uikit-items-center uikit-gap-1 uikit-flex">
            <TIcon
              name="tg_wallet_warn_icon"
              fontSize="16"
              className="uikit-text-[#ff9241]"
            />
            <TIcon
              name="tg_wallet_arrow_right-right0"
              fontSize="24"
              className="uikit-text-t2 uikit-relative uikit-right-1.5"
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export default SettingPanel;