import { LoadingIcon } from "@/components/LoadingIcon";
import { FC, memo } from "react";
import { WalletItemProps } from "../type";
import { cn } from "../utils";

type PropsType = {
  className?: string;
  wallet: WalletItemProps;
  handleClick: (item: WalletItemProps) => void;
  isLoading?: boolean;
};
const WalletItem: FC<PropsType> = ({
  className,
  wallet,
  handleClick,
  isLoading,
}) => {
  const { icon, iconSrc, name, desc } = wallet;
  return (
    <div
      className={cn(
        className,
        "uikit-min-h-[90px] uikit-flex uikit-flex-col uikit-items-center uikit-justify-start uikit-px-1 uikit-cursor-pointer uikit-overflow-hidden hover:uikit-opacity-70",
      )}
      onClick={() => handleClick(wallet)}
    >
      <div className="uikit-relative uikit-w-[56px] uikit-h-[56px] uikit-flex uikit-items-center uikit-justify-center uikit-rounded-[10px]">
        {isLoading && (
          <LoadingIcon
            className="uikit-absolute uikit-top-0 uikit-left-0 top-right-0"
            width={56}
            height={56}
          />
        )}
        {iconSrc ? (
          <img
            className="uikit-w-[48px] uikit-h-[48px] uikit-rounded-[10px]"
            src={iconSrc}
            alt=""
          />
        ) : (
          icon
        )}
      </div>
      <span className="uikit-w-full uikit-truncate uikit-mt-1 uikit-text-primary uikit-text-[12px] uikit-leading-4 uikit-font-switzerMedium uikit-text-center uikit-whitespace-nowrap">
        {name}
      </span>
      <span className="uikit-w-full uikit-truncate uikit-text-secondary uikit-text-[10px] uikit-leading-[14px] uikit-font-switzerMedium uikit-text-center uikit-whitespace-nowrap">
        {desc}
      </span>
    </div>
  );
};

export default memo(WalletItem);