import { FC, memo } from "react";
import { SocialItemProps } from "../type";
import { cn } from "../utils";

const SocialItem: FC<
  SocialItemProps & {
    handleClick: () => void;
  }
> = ({ icon, iconSrc, handleClick }) => {
  return (
    <div
      onClick={handleClick}
      className={cn(
        "uikit-flex uikit-items-center uikit-justify-center uikit-w-[52px] uikit-h-[52px] uikit-flex-shrink-0 uikit-rounded-full uikit-border-border1 uikit-border-solid uikit-border uikit-box-border uikit-cursor-pointer  hover:uikit-opacity-70",
      )}
    >
      {iconSrc ? (
        <img className="uikit-w-[30px] uikit-h-[30px]" src={iconSrc} alt="" />
      ) : (
        icon
      )}
    </div>
  );
};

interface PropsType {
  socialOptions: SocialItemProps[];
  handleClick: (item: SocialItemProps, index: number) => void;
}
const SocialLogin: FC<PropsType> = ({ socialOptions, handleClick }) => {
  return (
    <div className="uikit-flex uikit-items-center uikit-justify-between uikit-px-3">
      {socialOptions.map((option, index) => {
        return (
          <SocialItem
            key={option.key}
            icon={option.icon}
            handleClick={() => {
              handleClick(option, index);
            }}
          />
        );
      })}
    </div>
  );
};

export default memo(SocialLogin);