import cx from "classnames";
import React from "react";
import { Icon } from "../Icon";

const CLASS_ROOT = "social-button";

export type SocialName =
  | "x"
  | "facebook-2"
  | "linkedin-2"
  | "instagram"
  | "pinterest"
  | "snapchat"
  | "tiktok"
  | "whatsapp"
  | "youtube"
  | "email";

type CommonProps = {
  name: SocialName;
  className?: string;
};

type ButtonProps = CommonProps &
  Omit<
    React.ButtonHTMLAttributes<HTMLButtonElement>,
    "type" | keyof CommonProps
  >;

type LinkProps = CommonProps &
  Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof CommonProps> & {
    href: string;
  };

export type SocialButtonProps = ButtonProps | LinkProps;

export const SocialButton = React.forwardRef<
  HTMLButtonElement | HTMLAnchorElement,
  SocialButtonProps
>(({ name, className, ...rest }, ref) => {
  const props = rest as any;
  const classes = cx(CLASS_ROOT, `${CLASS_ROOT}--${name}`, className);

  if (!("href" in props)) {
    return (
      <button
        ref={ref as React.Ref<HTMLButtonElement>}
        className={classes}
        {...props}
      >
        <Icon name={name} size="medium" />
      </button>
    );
  } else {
    return (
      <a
        ref={ref as React.Ref<HTMLAnchorElement>}
        className={classes}
        {...props}
      >
        <Icon name={name} size="medium" />
      </a>
    );
  }
});

SocialButton.displayName = "SocialButton";